虚拟DOM

浏览器渲染

在认识虚拟DOM之前让我们先看看,一个html文件在浏览器中是如何进行渲染的。
虚拟DOM
由上可知,每进行一次DOM操作,浏览器都会重新绘制一遍,dom操作成本实在是太高,所以才有了 虚拟DOM 在js里模拟和对比。
虚拟DOM在绘制层尽可能减少重绘的负担次数,使用 diff算法

diff算法流程

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