Question

我正在调查虚拟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 - ＆gt;设置属性 - ＆gt;安装到文档比直接编辑dom属性更快？）。从另一方面来说，我们有快速漂亮的差异算法，它只生成2个补丁来替换我们的div的内容，可能我们将有1个重新流动。（如果我在写回流次数时犯了错误，请告诉我）

在这种情况下，virtual-dom可能是规则，但是当我们有两个非常不同的树时，我们不会从diff中获得很多好处，所以我们可能会阻止一些重新流动，但是生成新树和运行差异和补丁要长得多。这是我的第二个问题。例如，在https://github.com/Matt-Esch/virtual-dom库的动机中，他们说：“因此，当您的应用程序状态发生变化时，您只需创建一个虚拟树或VTree，而不是更新DOM”。每当我需要在视图上更改某些内容时，构建新的虚拟树真的很棒吗？

当然，我会尝试进行一些测试以评估性能，但我想知道更多技术方面以及为什么虚拟dom真的更好，或者可能不是？

Answer 1

因此，当我们使用直接操作时，我们可能会有4个重新流动：2个用于删除每个div并用于创建新的div。

如果批处理DOM操作操作和不将它们与需要读取布局状态的操作交错（例如，读取计算样式，计算偏移量），那么所有这些操作一起只会导致单次回流。

目前，浏览器的重排和重绘算法也相当先进，只调整文档的某些部分，只需重新合成移动的图层，如果它们不改变尺寸，则不重新绘制它们。

如果您担心性能问题，您应该使用浏览器的性能分析工具，看看究竟是什么让您失望，以及在进行过早优化之前是否可以使用本机实用程序对其进行优化。

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

Answer 2

当您使用虚拟DOM时，您还要承担用户的一些责任，以考虑回流。

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

当virtual-dom比手动操作更快？

2 个答案: