DOM和VDOM

DOM的缺陷：

Java 操纵 DOM 是会影响到整个渲染流水线的，另外，DOM 还提供了一组 Java 接口用来遍历或者修改节点，这套接口包含了 getElementById、removeChild、 等方法。

比如，我们可以调用 document.body.(node)往 body 节点上添加一个元素，调用该 API 之后会引发一系列的连锁反应。首先渲染引擎会将 node 节点添加到 body 节点之上，然后触发样式计算、布局、绘制、栅格化、合成等任务，我们把这一过程称为重排。除了重排之外，还有可能引起重绘或者合成操作，形象地理解就是“牵一发而动全身”。另外，对于 DOM 的不当操作还有可能引发强制同步布局和布局抖动的问题，这些操作都会大大降低渲染效率。因此，对于 DOM 的操作我们时刻都需要非常小心谨慎。

DOM的本质：

浏览器概念，浏览器从服务器端获取html页面，浏览器将html解析成一颗元素嵌套关系的dom树，用对象来表示页面的元素，并提供操作dom对象的api。

VDOM：

框架概念，用js对象来模拟页面的dom元素的嵌套关系，并没有真正的挂载到页面上，作用就是对比两颗dom树的差别，进行页面的局部更新，由于VUE是数据驱动，更加的利于局部更新避免重绘。

VDOM做了哪些事情：

1.将页面改变的内容应用到虚拟DOM上，而不是直接应用到DOM上。

2.变化被应用到虚拟DOM上时，虚拟DOM并不着急去渲染页面，而仅仅是调整虚拟DOM的内部状态，这样操作虚拟DOM的代价就减轻了。

3.在虚拟DOM收集到足够的改变时，再把这些变化一次性应用到真是的DOM上。

3.png

框架给你的保证是，你在不需要手动优化的情况下，我依然可以给你提供过得去的性能。

在比较性能的时候，要分清楚初始渲染、小量数据更新、大量数据更新这些不同的场合。