4

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

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

假设我要添加 10K 节点列表，ReactJS 和其他框架所需的 DOM 操作时间不应该相似吗？

4

4 回答 4

6

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

但是，浏览器上的计算占用的内存更少，并且不会反映 DOM 上的任何内容。VirtualDOM使用了这种方法。

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

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

因此，每当发生变化时，Virtual DOM 不会直接反映在 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 的文本，不会影响<span>DOM 的 child 和其他属性

也可以看看

于 2015-10-12T09:31:47.843 回答
2

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

例如（人为），更新一个

  • 实时 DOM 元素可能需要 3 秒
  • 虚拟 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 昂贵得多。

于 2015-10-12T05:49:29.403 回答
0

React 中虚拟 DOM 的工作是创建虚拟 DOM 树，并在每个事件循环结束时，将当前的 V-DOM 树与之前的 V-DOM 树进行比较，然后获取补丁并操作真实的DOM。如果在一个事件循环中，用户多次修改同一个组件，React 将计算最终结果并操作真实的 DOM，这称为 'Batching'

所以实际上，并不是每个案例都会利用 React 的 V-DOM 优势。在您的示例中，React 可能会使用 innerHTML 来操作真实的 DOM。如果您经常更改元素之一，React 将执行批处理。

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

于 2016-02-07T02:54:26.403 回答
0

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

这就是ReactJs 速度快的原因之一

于 2018-01-23T21:12:14.780 回答