javascript - virtual dom在哪些情况下会快于直接操作dom？

Question

找了篇比较易懂的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的步骤？

Answer 1

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

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