虚拟 DOM

[felix-cao]

我们知道 React 和 Vue 都采用了虚拟 DOM ，那么究竟什么是虚拟 DOM 呢？

一、虚拟DOM

图1.1 为标准的 DOM 机制 图1.2 为虚拟 DOM 机制

对比两个图就可以发现标准 DOM 机制下，用户在应用上的操作是直接对真实DOM进行操作的，而在虚拟DOM机制下，用户的操作产生的数据改变或者 state 改变（此处的改变具体的讲就是事件函数对DOM 的操作）都会保存到虚拟DOM上，之后对这些更改进行diff算法计算，对比操作前后的虚拟DOM树，把更改后的变化再同步到真实DOM上。

其实说白一点，虚拟DOM就是用JS对象模拟DOM树

二、 为什么要用虚拟DOM？

2.1、Javascript很快

Chrome刚出来的时候，在Chrome里跑Javascript非常快，给了其它浏览器很大压力。而现在经过几轮你追我赶，各主流浏览器的Javascript执行速度都很快了。

从 Julia 这里我们可以看到，JavaScript语言已经非常快了，和C就是几倍的关系，和java在同一个量级。所以说，单纯的JavaScript还是还是很快的。

2.2、操作 DOM 性能很慢

操作 DOM 性能很慢是因为浏览器的渲染引擎的 reflow 和 repaint 导致的，详情请移步《浏览器的 reflow 和 repaint》

To Be Continuing