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

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

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

解决方法:

So when we use direct manipulation we will have probably 4 re-flows: 2 for removing each div and for creating new one.

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

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

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

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

标签：javascript,dom,html,dom-manipulation
来源： https://codeday.me/bug/20190624/1275750.html