前端面试答案2

双向绑定原理：实现数据的双向绑定，首先要对数据进行劫持监听，因此咱们须要设置一个监听器Observer，用来监听全部属性。若是属性发上变化了，就须要告诉订阅者Watcher看是否须要更新。由于订阅者是有不少个，因此咱们须要有一个消息订阅器Dep来专门收集这些订阅者，而后在监听器Observer和订阅者Watcher之间进行统一管理的。

vue2与3的双向绑定和实现的优缺点：1. 在Vue中，Object.defineProperty没法监控到数组下标的变化，

2. Object.defineProperty只能劫持对象的属性,所以咱们须要对每一个对象的每一个属性进行遍历。

而要取代它的Proxy有如下两个优势：

1. 能够劫持整个对象，并返回一个新对象
2. 有13种劫持操做

Proxy 能够理解成，在目标对象以前架设一层“拦截”，外界对该对象的访问，都必须先经过这层拦截，所以提供了一种机制，能够对外界的访问进行过滤和改写。

vue路由实现原理：：JS会感知到url的变化，经过这一点，能够用js动态的将当前页面的内容清除掉，而后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来作了，而是前端来作，判断页面究竟是显示哪一个组件，清除不须要的，显示须要的组件。这种过程就是单页应用，每次跳转的时候不须要再请求html文件了。

虚拟dom：

最原始的状况下，框架一旦发现数据发生了变更就对整个页面进行更新。这样的作法效率低下，由于数据的变更而致使的页面变更极可能只是局部的，直接对整个页面进行更新形成了没必要要的性能消耗。

因此人们很天然的就会想到将因数据变更而新生成的DOM结构与已经显示出来的DOM结构进行比较，找出二者的不一样处，再对这些不一样进行从新渲染便可。有的放矢，从而提高性能。

而那个仅在内存中未显示出来的DOM结构就是所谓的虚拟DOM，找出二者不一样的算法就是Diff算法。

不过须要注意的是，虚拟DOM和Diff算法的出现是为了解决由命令式编程转变为函数式编程、数据驱动后所带来的性能问题的。换句话说，直接操做DOM的性能并不会低于虚拟DOM和Diff算法，甚至还会优于。

compare属性：

• computed 会搜集并记录依赖。
• 依赖发生了变化才会从新计算 computed ，因为 computed 是有缓存的，因此当依赖变化以后，第一次访问 computed 属性的时候，才会计算新的值。
• 只能搜集到响应式属性依赖，没法搜集到非响应式属性依赖。
• 没法搜集到当前 vm 实例以外的属性依赖

nextTick：两个方法的做用都是在DOM更新循环结束以后执行延迟回调。当咱们改变了数据的时候，DOM的渲染须要时间，然而咱们但愿去操做DOM元素，就须要等待渲染完成后再去操做。就须要用到 nextTick，将等待DOM渲染完成后须要的操做放在回调函数里。

父子组件传值方式汇总：https://blog.csdn.net/lianwenxiu/article/details/87898688

 

浏览器缓存机制：

（a）浏览器断定是否有缓存

（b）缓存是否过时

（b）过程执行完后，若是断定为未过时，则使用客户端缓存。那么就是属于“强缓存”。

（c）跟服务器协商是否使用缓存

（d）协商缓存

vue优化方案：

对路由组件进行懒加载

v-if 和 v-show选择调用

v-show和v-if的区别是：v-if是懒加载，当状态为true时才会加载，而且为false时不会占用布局空间；v-show是不管状态是true或者是false，都会进行渲染，并对布局占据空间对于在项目中，须要频繁调用，不须要权限的显示隐藏，能够选择使用v-show，能够减小系统的切换开销。

为item设置惟一key值，

在列表数据进行遍历渲染时，须要为每一项item设置惟一key值，方便vuejs内部机制精准找到该条列表数据。当state更新时，新的状态值和旧的状态值对比，较快地定位到diff。

细分vuejs组件

在项目开发过程之中，初版本把全部的组件的布局写在一个组件中，当数据变动时，因为组件代码比较庞大，vuejs的数据驱动视图更新比较慢，形成渲染比较慢。形成比较差的体验效果。因此把组件细分，好比一个组件，能够把整个组件细分红轮播组件、列表组件、分页组件等。

减小watch的数据

当组件某个数据变动后须要对应的state进行变动，就须要对另外的组件进行state进行变动。可使用watch监听相应的数据变动并绑定事件。当watch的数据比较小，性能消耗不明显。当数据变大，系统会出现卡顿，因此减小watch的数据。其它不一样的组件的state双向绑定，能够采用事件中央总线或者vuex进行数据的变动操做。

内容类系统的图片资源按需加载

对于内容类系统的图片按需加载，若是出现图片加载比较多，能够先使用v-lazy之类的懒加载库或者绑定鼠标的scroll事件，滚动到可视区域先再对数据进行加载显示，减小系统加载的数据。

SR(服务端渲染)

若是项目比较大，首屏不管怎么作优化，都出现闪屏或者一阵黑屏的状况。能够考虑使用SSR(服务端渲染)，vuejs官方文档提供next.js很好的服务端解决方案，可是局限性就是目前仅支持Koa、express等Nodejs的后台框架，须要webpack支持。目前本身了解的就是后端支持方面，vuejs的后端渲染支持php，其它的不太清楚。

 

vue渲染大量数据时处理：

1. 异步渲染组件：由于组件渲染太多，影响页面的渲染时间，全部能够延迟组件渲染，能够考虑v-if处理

2. 可使用虚拟滚动的组件：参考使用这个插件

vue首屏优化：

一、压缩代码

不管是否为单页应用，代码的压缩都是要作的。 
对于vue-cli生成的项目，在Webpack配置文件中使用了UglifyJsPlugin进行代码的压缩：

二、框架和插件按需加载

对于项目中用到的一些UI框架，好比 Onsen UI 、Mint UI 等等。若是咱们只使用框架的部分组件，那么能够不要引入整个框架，按需引入用到的组件

三、框架和插件从cdn中引入

在开发过程当中，咱们其实不会要去更改这些第三方库，因此能够把它们放到cdn中，不参与打包。 
在 index.html 中使用cdn引入

四、路由懒加载

 

路由懒加载也就是 把不一样路由对应的组件分割成不一样的代码块，而后当路由被访问的时候才加载对应组件。 
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

、

重绘与重排

1>重排(Reflow)：当渲染树的一部分必须更新而且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并从新构造渲染树。

2>重绘(Repaint)：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性从新绘制，使元素呈现新的外观。好比改变某个元素的背景色、文字颜色、边框颜色等等

3>引起重排

1.添加、删除可见的dom

2.元素的位置改变

3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)

4.页面渲染初始化

5.浏览器窗口尺寸改变

6.获取某些属性。当获取一些属性时，浏览器为取得正确的值也会触发重排,它会致使队列刷新，这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。因此，在屡次使用这些值时应进行缓存。

4>优化：

浏览器本身的优化：

浏览器会维护1个队列，把全部会引发重排，重绘的操做放入这个队列，等队列中的操做到必定数量或者到了必定时间间隔，浏览器就会flush队列，进行一批处理，这样屡次重排，重绘变成一次重排重绘

减小 reflow/repaint：
（1）不要一条一条地修改 DOM 的样式。能够先定义好 css 的 class，而后修改 DOM 的 className。

（2）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。（3）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。（4）千万不要使用 table 布局。由于可能很小的一个小改动会形成整个 table 的从新布局。(table及其内部元素除外，它可能须要屡次计算才能肯定好其在渲染树中节点的属性，一般要花3倍于同等元素的时间。这也是为何咱们要避免使用table作布局的一个缘由。)