一、Vue中的虚拟DOM树
首先为什么使用虚拟DOM树,这是因为不用频繁的去操作真实DOM ,这样会很大的提升性能。以下举个操作真实DOM的例子:
在控制台可以看到循环消耗的时间:
如果减少对真实DOM的操作次数,可以提高性能。
控制台显示效果:
由此可以看到,减少对真实DOM的操作可以提高性能。而Vue正是在内存当中生成一个虚拟DOM树,减少了对真实DOM的操作,而虚拟DOM树其实就是JS里面的普通对象。
Vue在渲染页面时会生成一个虚拟DOM树,当页面改变时会再生成一个虚拟DOM树,并与之前的虚拟DOM树进行比较,Vue通过diff算法,来记录差异的地方。得到需要更新的地方,更新内容。
二、diff算法
虚拟DOM中,在DOM的状态发生变化时,虚拟DOM会进行Diff运算,来更新只需要被替换的DOM,而不是全部重绘。
在Diff算法中,只平层的比较前后两棵DOM树的节点,没有进行深度的遍历。
1.如果节点类型改变,直接将旧节点卸载,替换为新节点,旧节点包括下面的子节点都将被卸载,如果新节点和旧节点仅仅是类型不同,但下面的所有子节点都一样时,这样做也是效率不高的一个地方。
2.节点类型不变,属性或者属性值改变,不会卸载节点,执行节点更新的操作。
3.文本改变,直接修改文字内容
如果想在中间插入节点F,简单粗暴的做法是:卸载C,装载F,卸载D,装载C,卸载E,装载D,装载E。如下图:
写代码时,如果没有给数组或枚举类型定义一个key,就会采用上面的粗暴算法。
如果为元素增加key后,Vue就能根据key,直接找到具体的位置进行操作,效率比较高。如下图:
Vue中的虚拟DOM树与diff算法
最新推荐文章于 2022-07-31 01:36:34 发布