首页 > virtual dom在哪些情况下会快于直接操作dom?

virtual dom在哪些情况下会快于直接操作dom?

找了篇比较易懂的virtual dom实现讲解的文章(https://github.com/livoras/blog/issues/13),这个实现大致是https://github.com/Matt-Esch/virtual-dom的一个简化版本。

文中把dom树种遇到的差异分为四种:

  1. 整个标签替换(标签名都不一样,只能全部换掉)

  2. 重定位(两个同级children比较,发现有共同点,通过一个最小编辑算法生成一个包含增,删和移动位置的patch。)

  3. 标签属性

  4. 标签内的文本内容

1,3,4都很简单,2复杂一点。

问题是最终应用patch的时候也是直接操作dom,这种把所有差异存起来然后一起应用比起传统依次操作dom的优势在哪里?

我再简化下问题:譬如当前Patch中只包含多个节点的属性变化差异,这种情况比起传统的依次操作这些节点改变属性有优势吗?如果有,是否只是避免了重复遍历dom树来找到想要操作的dom的步骤?


其实你要注意一点,virtual dom到底是不是快于传统dom操作要看应用场景,react刚出来的时候各种比较react和angular性能的文章里面战得天翻地覆,现在也没人提这个话题了。

所以如果光想着virtual dom能不能带来性能上的提升就忽视了它的重点其实是改变了我们修改html页面的办法,而不仅仅是为了提升性能。说virtual dom性能好就相当于先射箭再画靶子,只是为了说明“我们这个virtual dom不仅这里好,连那里也好,什么都好”……

【热门文章】
【热门文章】