虚拟DOM
Vue提供的对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。
- 提供一种方便的工具,使得开发效率得到保证
- 保证最小化的DOM操作,使得执行效率得到保证
虚拟dom的框架/工具的实现:
- 根据虚拟dom树最初渲染成真实dom
- 数据变化/页面需要重新渲染,重新生成一个新的完整的虚拟dom
- 新的虚拟dom和旧的虚拟dom做对比(diff算法)。得到需要更新的地方之后,更新内容
Vue的虚拟DOM工具能大量减少真实dom的操作,提高性能
案例
<div id="myp">1</div>
原生DOM操作:
//执行10000次代码 35ms
let myp = document.getElementById("myp")
console.time("temp")
for(var i=0;i<10000;i++){
let num = myp.innerHTML*1
myp.innerHTML = ++num
}
console.timeEnd("temp")
我们可以看到,执行10000此操作的时间大约35ms
Vue的虚拟DOM操作:
//执行10000次代码 0.3ms
let myp = document.getElementById("myp")
let num = 1
console.time("temp")
for(var i=0;i<10000;i++){
num++
}
myp.innerHTML = num
console.timeEnd("temp")
利用Vue提供的虚拟DOM操作,时间大约只有0.3ms
这就印证了我们上面所说的话:能大量减少真实dom的操作,提高性能
当用传统的方式操作DOM的时候,浏览器会从构建DOM树开始从头到尾执行一遍流程,效率很低。而虚拟DOM是用javascript对象表示的,而操作javascript是很简便高效的。虚拟DOM和真正的DOM有一层映射关系,很多需要操作DOM的地方都会去操作虚拟DOM,最后统一一次更新DOM。因而可以提高性能
diff算法(深度优先,同层比较)
虚拟DOM中,在DOM的状态发生变化时,虚拟DOM会进行Diff运算,来更新只需要被替换的DOM,而不是全部重绘。
在Diff算法中,只平层的比较前后两棵DOM树的节点,没有进行深度的遍历。
- 如果节点类型改变,直接将旧节点卸载,替换为新节点,旧节点包括下面的子节点都将被卸载,如果新节点和旧节点仅仅是类型不同,但下面的所有子节点都一样时,这样做也是效率不高的一个地方。
- 节点类型不变,属性或者属性值改变,不会卸载节点,执行节点更新的操作。
- 文本改变,直接修改文字内容。
- 移动,增加,删除子节点时:
如果想在中间插入节点F,简单粗暴的做法是:卸载C,装载F,卸载D,装载C,卸载E,装载D,装载E。如下图:
如果为元素增加key后,Vue就能根据key,直接找到具体的位置进行操作,效率比较高。如下图:
Vue的源码中有较详细的diff实现:
diff算法