当虚拟 dom 比手动操作更快时

When virtual-dom is faster than manual manipulation?

本文关键字：操作 虚拟 dom      更新时间：2023-09-26

我现在正在研究虚拟dom，我想知道虚拟dom是否真的比手动操作视图更快。现在我明白了 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 可能会规则，但是当我们有 2 个真正不同的树时，我们不会从 diff 中获得很多好处，所以我们可能会防止一些重排，但生成新树和运行 diff 和补丁的时间要长得多。这是我的第二个问题。例如，在 https://github.com/Matt-Esch/virtual-dom 库的动机中，他们说："因此，当您的应用程序状态发生变化时，您无需更新 DOM，只需创建一个虚拟树或 VTree"。每次我需要更改视图上的某些内容时，构建一个新的虚拟树真的很好吗？

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

因此，当我们使用直接操作时，我们可能有 4 次重排：2 次用于删除每个div 和创建新div。

如果您批处理 DOM 操作操作，并且不将它们与需要读取布局状态的操作（例如读取计算样式、计算偏移量）交错，则所有这些操作一起只会导致一次重排。

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

如果您担心性能，您应该使用浏览器的性能分析工具，看看是什么实际上减慢了您的速度，以及是否可以在进行过早优化之前使用本机实用程序进行优化。

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

当你使用virtual-DOM时，你也承担了一些用户的责任来考虑回流。

当您应用补丁时，您可以一起应用它们，而无需读取 DOM 状态。这一刻可以帮助您避免不必要的回流。

相关文章：