phpul前面的点前端法式员心心念念的面试题精选全都有谜底助你拿心仪offer

谈谈对MVVM开拓模式的理解

MVVM分为Model、View、ViewModel三者。

Model：代表数据模型，数据和业务逻辑都在Model层中定义；View：代表UI视图，卖力数据的展示；ViewModel：卖力监听Model中数据的改变并且掌握视图的更新，处理用户交互操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。
因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

phpul前面的点前端法式员心心念念的面试题精选全都有谜底助你拿心仪offer Webpack

这种模式实现了Model和View的数据自动同步，因此开拓者只须要专注对数据的掩护操作即可，而不须要自己操作dom。

Vue 有哪些指令？(2018年Vue.js深入浅出教程)

v-html、v-show、v-if、v-for等等。

v-if 和 v-show 有什么差异？

v-show 仅仅掌握元素的显示办法，将 display 属性在 block 和 none 来回切换；而v-if会掌握这个 DOM 节点的存在与否。
当我们须要常常切换某个元素的显示/隐蔽时，利用v-show会更加节省性能上的开销；当只须要一次显示或隐蔽时，利用v-if更加合理。

简述Vue的相应式事理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty将它们转为getter/setter并且在内部追踪干系依赖，在属性被访问和修正时关照变革。
每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会关照watcher重新打算，从而致使它关联的组件得以更新。

Vue中如何在组件内部实现一个双向数据绑定？

假设有一个输入框组件，用户输入时，同步父组件页面中的数据。

详细思路：父组件通过props传值给子组件，子组件通过 $emit 来关照父组件修正相应的props值，详细实现如下：

import Vue from 'vue'const component = { props: ['value'], template: ` <div> <input type=\公众text\"大众 @input=\"大众handleInput\公众 :value=\"大众value\公众> </div> `, data () { return { } }, methods: { handleInput (e) { this.$emit('input', e.target.value) } }}new Vue({ components: { CompOne: component }, el: '#root', template: ` <div> <comp-one :value1=\"大众value\公众 @input=\公众value = arguments[0]\"大众></comp-one> </div> `, data () { return { value: '123' } }})

可以看到，当输入数据时，父子组件中的数据是同步改变的：

我们在父组件中做了两件事，一是给子组件传入props，二是监听input事宜并同步自己的value属性。
那么这两步操作能否再精简一下呢？答案是可以的，你只须要修正父组件：

template: ` <div>  <comp-one v-model=\"大众value\公众></comp-one> </div> `

v-model 实际上会帮我们完成上面的两步操作。

Vue中如何监控某个属性值的变革？

比如现在须要监控data中， obj.a 的变革。
Vue中监控工具属性的变革你可以这样：

watch: { obj: { handler (newValue, oldValue) { console.log('obj changed') }, deep: true } }

deep属性表示深层遍历，但是这么写会监控obj的所有属性变革，并不是我们想要的效果，以是做点修正：

watch: { 'obj.a': { handler (newName, oldName) { console.log('obj.a changed') } } }

还有一种方法，可以通过computed 来实现，只须要：

computed: { a1 () { return this.obj.a }}

利用打算属性的特性来实现，当依赖改变时，便会重新打算一个新值。

Vue中给data中的工具属性添加一个新的属性时会发生什么，如何办理？

示例：

<template> <div> <ul> <li v-for=\"大众value in obj\"大众 :key=\"大众value\"大众> {{value}} </li> </ul> <button @click=\"大众addObjB\"大众>添加obj.b</button> </div></template><script>export default { data () { return { obj: { a: 'obj.a' } } }, methods: { addObjB () { this.obj.b = 'obj.b' console.log(this.obj) } }}</script><style></style>

点击button会创造， obj.b 已经成功添加，但是视图并未刷新：

缘故原由在于在Vue实例创建时， obj.b 并未声明，因此就没有被Vue转换为相应式的属性，自然就不会触发视图的更新，这时就须要利用Vue的全局api—— $set()：

addObjB () { // this.obj.b = 'obj.b' this.$set(this.obj, 'b', 'obj.b') console.log(this.obj) }

$set() 方法相称于手动的去把 obj.b 处理成一个相应式的属性，此时视图也会随着改变了：

delete和Vue.delete删除数组的差异

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。

Vue.delete 直接删除了数组改变了数组的键值。

var a=[1,2,3,4] var b=[1,2,3,4] delete a[1] console.log(a) this.$delete(b,1) console.log(b)

如何优化SPA运用的首屏加载速率慢的问题？

将公用的JS库通过script标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速率；在配置路由时，页面和组件利用

1、减少 HTTP 要求数量

在浏览器与做事器进行通信时，紧张是通过 HTTP 进行通信。
浏览器与做事器须要经由三次握手，每次握手须要花费大量韶光。
而且不同浏览器对资源文件并发要求数量有限（不同浏览器许可并发数），一旦 HTTP 要求数量达到一定数量，资源要求就存在等待状态，这是很致命的，因此减少 HTTP 的要求数量可以很大程度上对网站性能进行优化。

CSS Sprites

海内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP要求的一种办理方案，可以通过CSS的background属性来访问图片内容。
这种方案同时还可以减少图片总字节数。

合并 CSS 和 JS 文件

现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。
为了减少 HTTP 要求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

采取 lazyLoad

俗称

2、掌握资源文件加载优先级

浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一韶光展示页面给用户，就须要将CSS提前加载，不要受 JS 加载影响。

一样平常情形下都是CSS在头部，JS在底部。

3、利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次要求该资源时，如果资源已经存在就不须要到做事看重新要求该资源，直接在本地读取该资源。

4、减少重排（Reflow）

基本事理：重排是DOM的变革影响到了元素的几何属性（宽和高），浏览器会重新打算元素的几何属性，会使渲染树中受到影响的部分失落效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的缘故原由。
如果Reflow的过于频繁，CPU利用率就会急剧上升。

减少Reflow，如果须要在DOM操作时添加样式，只管即便利用增加class属性，而不是通过style操作样式。

5、减少 DOM 操作

6、图标利用 IconFont 更换

网页从输入网址到渲染完成经历了哪些过程？

大致可以分为如下7步：

输入网址；发送到DNS做事器，并获取域名对应的web做事器对应的ip地址；与web做事器建立TCP连接；浏览器向web做事器发送http要求；web做事器相应要求，并返回指定url的数据（或缺点信息，或重定向的新的url地址）；浏览器下载web做事器返回的数据及解析html源文件；天生DOM树，解析css和js，渲染页面，直至显示完成；

jQuery获取的dom工具和原生的dom工具有何差异？

js原生获取的dom是一个工具，jQuery工具便是一个数组工具，实在便是选择出来的元素的数组凑集，以是说他们两者是不同的工具类型不等价。

原生DOM工具转jQuery工具：

var box = document.getElementById('box');var $box = $(box);

jQuery工具转原生DOM工具：

var $box = $('#box');var box = $box[0];

jQuery如何扩展自定义方法

(jQuery.fn.myMethod=function () { alert('myMethod');})// 或者：(function ($) { $.fn.extend({ myMethod : function () { alert('myMethod'); } })})(jQuery)

利用：

\"大众#div\"大众

).myMethod();

CSS，JS代码压缩，以及代码CDN托管，图片整合。

(1)CSS,JS 代码压缩：

可以运用gulp的gulp-uglify，gulp-minify-css模块完成;可以运用Webpack的 UglifyJsPlugin压缩插件完成。

(2)CDN：

内容分发网络(CDN)是一个经策略性支配的整体系统，包括分布式存储、负载均衡、网络要求的重定向和内容管理4个要件。
紧张特点有：本地Cache加速，镜像做事，远程加速，带宽优化。
关键技能有：内容发布，内容路由，内容交流，性能管理。
CDN网站加速适宜以咨询为主的网站。
CDN是对域名加速不是对网站做事器加速。
CDN和镜像站比较不须要访客手动选择要访问的镜像站。
CDN利用后网站无需任何修正即可利用CDN得到加速效果。
如果通过CDN后看到的网页还是旧网页，可以通过URL推送做事办理，新增的网页和图片不须要URL推送。
利用动态网页可以不缓存即时性哀求很高的网页和图片。
CDN可以通过git或SVN来管理。

(3)图片整合

减少网站加载韶光的最有效的办法之一便是减少网站的HTTP要求数。
实现这一目标的一个有效的方法便是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。
缺陷是可掩护性差。
可以利用百度的fis/Webpack来自动化管理sprite。

如何利用Webpack把代码上传做事器以及转码测试?

(1)代码上传：

可以利用sftp-Webpack-plugin，但是会把子文件夹给提取出来，不优雅。
可以利用gulp+Webpack来实现。

(2)转码测试

Webpack运用babel来对ES6转码，开启devtool: “source-map\公众来进行浏览器测试。
运用karma或mocha来做单元测试。

项目上线流程是若何的?

(1)流程建议

- 仿照线上的开拓环境

本地反向代理线上真实环境开拓即可。
(apache，nginx，nodejs均可实现)

- 仿照线上的测试环境

仿照线上的测试环境，实在是须要一台有真实数据的测试机，建议没条件搭daily的，就直接用线上数据测好了，只不过程序部分走你们的测试环境而已，有条件搭daily最好。

- 可连调的测试环境

可连调的测试环境，分为2种。
一种是开拓测试都在一个局域网段，直接绑hosts即可，不在一个网段，就每人分配一台虚拟的测试机，放在大家都可以访问到的公司内网，代码直接往上布即可。

- 自动化的上线系统

自动化的上线系统，可以采取Jenkins。
如果没有，可以自行搭建一个大略单纯的上线系统，事理是每次上线时都抽取最新的trunk或master，做一个tag，再打一个韶光戳的标记，然后分发到cdn就行了。
界面里就2个功能，打tag，回滚到某tag，支配。

- 适宜前后真个开拓流程

开拓流程依据公司所用到的工具，构建，框架。
原则便是分散独立开拓，相互不滋扰，连调时有hosts可绑即可。

(2)大略的可操作流程

- 代码通过git管理，新需求创建新分支，分支开拓，主干发布

- 上线走大略单纯上线系统，拜会上一节

- 通过gulp+Webpack连到发布系统，一键集成，本地只关心原码开拓

- 本地环境通过Webpack反向代理的server

- 搭建基于linux确当地测试机，自动完成build+push功能

工程化怎么管理的?

gulp和Webpack

git常用命令

Workspace：事情区

Index / Stage：暂存区

Repository：仓库区(或本地仓库)

Remote：远程仓库

Webpack 和 gulp比拟

Gulp 便是为了规范前端开拓流程，实现前后端分离、模块化开拓、版本掌握、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。
说的形象点，“Gulp就像是一个产品的流水线，全体产品从无到有，都要受流水线的掌握，在流水线上我们可以对产品进行管理。
” 其余，Gulp是通过task对全体开拓过程进行构建。

Webpack 是当下最热门的前端资源模块化管理和打包工具。
它可以将许多疏松的模块按照依赖和规则打包成符合生产环境支配的前端资源。
还可以将按需加载的模块进行代码分隔，等到实际须要的时候再异步加载。
通过 loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。

Gulp和Webpack功能实现比拟：从基本观点、启动本地Server、sass/less预编译、模块化开拓、文件合并与压缩、mock数据、版本掌握、组件掌握八个方面对Gulp和Webpack进行比拟。

Webpack打包文件太大怎么办?

Webpack 把我们所有的文件都打包成一个 JS 文件，这样纵然你是小项目，打包后的文件也会非常大。
可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存几个方面动手优化。

不想让别人盗用你的图片，访问你的做事器资源该怎么处理?

目前常用的防盗链方法紧张有两种：

(1)设置Referer：适宜不想写代码的用户，也适宜喜好开拓的用户

(2)署名URL：适宜喜好开拓的用户

精灵图和base64如何选择?

css精灵，用于一些小的图标不是特殊多，一个的体积也稍大，比如大于10K(这个没有严格的界定)。

base64，用于小图标体积较小(相对付css精灵)，多少都无所谓。
字体图标，用于一些别人做好的图标库(也有少数自己去做的)用起来比较方便，他的图标只能用于单色，图标用只能于一种颜色。

Webpack怎么引入第三方的库?

拿jQuery为例：