什么时候虚拟-dom比手动操作更快？

Question

我现在正在研究virtual-dom，我想知道virtual-dom是否真的比使用view的手动操作更快。现在我明白了，virtual-dom和diff算法可以防止不必要的重新流，例如，当我们想要改变这一点时：

<div>
    <div>a</div>
    <div>b</div>
</div>

对于这一条：

<div>
    <div>c</div>
    <div>d</div>
</div>

因此，当我们使用直接操作时，我们可能会有4个回流:2个用于删除每个div和创建一个新的div。我们还将对dom进行更多的操作，因为我们应该创建新的元素(也许从dom ->中删除创建新的dom ->设置属性->挂载到文档比直接编辑dom属性更快？)。另一方面，我们有快速的比较算法，生成2个补丁来替换div的内容，可能会有1个回流。(如果我写回流次数有误，请告诉我)

在这种情况下，virtual-dom可能是规则，但是当我们有两个真正不同的树时，我们将不会从diff中获得很多好处，所以我们可能会防止一些回流，但生成新树和运行diff和patch的时间要长得多。这是我的第二个问题。例如，在https://github.com/Matt-Esch/virtual-dom库的动机中，他们说：“所以当您的应用程序状态改变时，您可以简单地创建一个虚拟树或VTree，而不是更新DOM”。每次我需要在我的视图上改变一些东西时，构建一个新的虚拟树真的很好吗？

当然，我会尝试做一些测试来评估性能，但我想知道更多的技术方面和原因，为什么虚拟-dom真的更好，或者，也许不是？

Answer 1

所以当我们使用直接操作时，我们可能会有4个重流:2个用于删除每个

和创建一个新的div。

如果你批量处理你的DOM操作，并且没有将它们与需要读取布局状态的操作交错(例如，读取计算的样式，计算偏移量)，那么所有这些操作放在一起只会导致一次回流。

如今，浏览器的重排和重绘算法也相当先进，如果不改变尺寸，只需调整文档的某些部分，并简单地重新组合移动的图层，而不重新绘制它们。

如果你关心性能，你应该使用浏览器的性能分析工具，看看是什么真正降低了你的速度，以及在过早优化之前，是否可以使用本机实用程序对其进行优化。

我认为虚拟dom更适合于某些东西(例如服务器)发出整个页面的DOM树，但您只想应用差异的情况。

Answer 2

当你使用virtual-DOM的时候，你也需要从用户的角度考虑回流。

当您应用补丁时，您可以在不读取DOM状态的情况下一起应用它们。这个时刻可以帮助你避免不必要的回流。