虚拟DOM

浏览器渲染

在认识虚拟DOM之前让我们先看看，一个html文件在浏览器中是如何进行渲染的。

由上可知，每进行一次DOM操作，浏览器都会重新绘制一遍，dom操作成本实在是太高，所以才有了 虚拟DOM 在js里模拟和对比。
虚拟DOM在绘制层尽可能减少重绘的负担次数，使用 diff算法 。

diff算法流程

由上可知diff算法会检测四种变化。
1> REPLACE 检测标签变化；
2> TEXT 检测标签内文字变化；
3> PROPS 检测标签属性值的变化；
4> REORDER 检测列表变化，会进行一个列表排序；
检测完所有变化，全部转换成一个可以做的最小量操作，一次渲染，可以避免执行次数，让浏览器减少渲染次数；