Question

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

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

让我们说如果我想添加10K节点列表，那么对于ReactJS和其他框架，不应该要求DOM操作时间相似吗？

Answer 1

浏览器引擎会为每个增量更新或应用于DOM的更改获取更多内存和布局更改。因为它涉及更多的几何和数学计算，这是根据浏览器上的每个布局更改计算的。

然而，浏览器上的计算占用的内存较少，并且不会反映DOM上的任何内容。此方法由 VirtualDOM 使用。

所以让我们拿一个DOM，每个DOM都有自己的属性DOM properties，模拟这些属性（使用JS）。

虚拟DOM保留状态让我们说它具有DOM的初始状态和所有属性

因此，只要存在更改，虚拟DOM就不会直接反映在DOM中，而是执行比较操作或差异操作，这将仅返回从先前状态更改的属性或属性

因此它只会更新DOM中已更改的属性。而不是重新粉刷整个DOM以进行微小的改变。

这在网络应用程序中非常有效，因为发生了更多的更新，其中更改DOM的一小部分可以通过浏览器引擎而不是整个DOM部分来节省更多内存或几何计算。

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

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

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

另见

How browser works浏览器如何绘制DOM
Reactive programming。

Answer 2

首先，您必须记住，DOM操作（重绘，重排）比Javascript操作贵得多。

例如（人为），更新

实时DOM元素可能需要3秒
shadow DOM元素可能需要1秒

现在让我们说我有一个DOM

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

并且假设您想要将其更新为

<ul>
    <li>First Item</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

如果没有虚拟dom，它会重新绘制屏幕上的所有6个元素，这需要3x6 = 18秒

使用虚拟dom，我们可以在内存中绘制它，它将花费我们6秒。在我们绘制之后，我们可以比较已经改变的东西，在我们的例子中是1个元素 - 我们可以在3秒内绘制这个元素，所以我们在9秒内完成了这个操作（这比没有虚拟dom的要快））。

当然，您可以想象并非所有情况都会从虚拟dom中受益，但在大多数情况下使用虚拟dom是一项重大改进。

关键假设是实时DOM重绘/重排比影子DOM贵得多。

Answer 3

React中虚拟DOM的工作是创建虚拟DOM树，在每个事件循环结束时，它会将当前的V-DOM树与之前的V-DOM树进行比较，然后得到补丁和操纵真正的DOM。如果在一个事件循环中，用户多次修改同一个组件，React将计算最终结果并操纵真实DOM，它被称为“批处理”

实际上，并非每个案例都会从反应的V-DOM中获益。在你的例子中，React可以使用innerHTML来操纵真正的DOM。如果您经常更改元素之一，React将进行批处理。

您可以参考以下文章 http://calendar.perfplanet.com/2013/diff/

Answer 4

虚拟DOM是真实DOM的轻量级副本，它通过声明性API和diff算法比较那些需要在可观察对象的帮助下修改的元素，然后仅重绘它们。而且，尽管每次都是从头开始创建虚拟DOM，但它需要不到50毫秒，这对于人类视觉感知来说并不明显。这种技术有时会加快应用程序的性能，因为它不会涉及不必要数量的真实DOM“更重”的元素，这些元素会保留其状态。

ReactJs is fast

的原因之一

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

4 个答案: