javascript - 虚拟 DOM 如何提高 ReactJS 的速度？

Question

我读到 ReactJS 与其他框架相比非常快，因为它使用了虚拟 dom。

我无法理解的是，最终所有框架都必须在浏览器中推送 dom 对象。 virtualDom 如何帮助提高速度？

比方说，如果我想添加 10K 节点列表，ReactJS 和其他框架所需的 DOM 操作时间不应该相似吗？

Answer 1

浏览器引擎为每个增量更新或应用到 DOM 的更改占用更多内存和布局更改。因为它涉及更多的几何和数学计算，这是在浏览器上的每个布局更改时计算的。

然而，浏览器上的计算占用的内存更少，并且不会在 DOM 上反射(reflect)任何内容。 VirtualDOM 使用了这种方法。

让我们来看看 DOM，每个 DOM 都有自己的属性 DOM properties ，这些属性是模拟的(使用 JS)。

虚拟 DOM 保留状态可以说它具有 DOM 的初始状态和所有属性

因此，每当有变化时，虚拟 DOM 不会直接反射(reflect)在 DOM 中，而是会执行比较操作或差异操作，这只会返回从先前状态更改的属性或特性

因此它只会更新 DOM 中更改的属性。而不是为了一个小的改变而重新绘制整个 DOM。

这在发生频繁更新的 Web 应用程序中非常有效，在这种情况下，更改 DOM 的一小部分可以节省浏览器引擎而不是整个 DOM 部分的内存或几何计算。


ex: <DIV style="color:red; background-color:white;">Hello world <span>from Foo</span></DIV>


当我将文本更改为 Hello Mars 时。而不是删除和创建新的 DOM。

Virtual DOM 只会改变 DIV 的文本，这不会影响 child <span>和 DOM 的其他属性

另见

• How browser works浏览器如何绘制DOM
• Reactive programming擅长响应式编程。