DOM操作影响性能？带vue的virtual Dom走一个

一、原理：

我们知道DOM是一个js对象，操作这个对象后，会触发一些浏览器行为，比如 layout（布局），paint（绘制），这就是我们说的引起性能变化的原因。

二、浏览器的渲染引擎工作机制：

浏览器有很多模块（引擎），其中呈现页面就是渲染引擎模块。

渲染引擎工作过程：

解析HTML，并生成DOM树  =====》  解析各种样式，合并DOM树，生成render tree =====》  对render tree各个节点计算布局信息，比如box的位置，尺寸等   ======》 根据render tree并利用浏览器的UI层进行绘制页面

其中DOM tree和Render tree上的节点并不是一一对应的，比如 “display：none”的节点只会在DOM tree上的，而不会出现在 render tree上的，因为这个节点不需要被绘制。

绘制paint是一个耗时的过程，layout更耗时，并且layout无法确定其规则（自上而下还是自下而上？），每一次layout会牵涉文档的重新计算，但是我们无法避免这个过程，提高性能的原理也只能是尽量减少layout。

三、最优的layout方案：批量读，一次性写。先对一个不在render tree上的节点进行操作，再把这个节点添加回render tree。这样只会触发一次DOM操作。使用requestAnimationFrame()，吧任何导致重绘的操作放入requestAnimationFrame

四、vue的虚拟dom原理

基于上面的分析：通过js操作DOM，但是性能差，所以virtual dom应运而生。

原理:在js模拟DOM树并对DOM树操作的一种技术。virtual DOM是一个纯js对象（字符串对象），所以对他操作会高效。