Incremental DOM 会在不久的将来取代 Virtual DOM

如果你熟悉 React，你可能听说过虚拟 DOM 的概念。通过提高 UI 性能，它是 React 流行的主要贡献者之一。

然而，当 Angular 在 2019 年发布他们的新渲染器 Angular Ivy 时，许多人想知道为什么他们选择了一个称为增量 DOM 而不是虚拟 DOM 的概念。尽管如此，Angular 仍然坚持这个想法。所以你可能想知道为什么 Angular 一开始就使用增量 DOM 并继续使用它。让我们找出来。

首先，让我们从虚拟 DOM 开始，了解它是如何工作的。

Virtual DOM 的工作原理

虚拟 DOM 的主要概念是在内存中保留 UI 的虚拟表示，并使用协调过程将其与真实 DOM 同步。此过程包括 3 个主要步骤：

当 UI 发生变化时，将整个 UI 渲染到虚拟 DOM。
计算先前和当前虚拟 DOM 表示之间的差异。
使用更改更新真实的 DOM。

Incremental DOM 的工作原理

增量 DOM 通过使用真实 DOM 来定位代码更改，带来了比虚拟 DOM 更直接的方法。因此，内存中不会有任何真实 DOM 的虚拟表示来计算差异，而真实 DOM 用于与新树进行比较。

这个增量 DOM 概念背后的主要思想是将每个组件编译成一组指令。然后，这些指令用于创建 DOM 树并对其进行更改。

是什么让 Incremental DOM 如此特别？

看完上面的解释，你肯定已经得出结论，增量 DOM 方法要简单得多。但这还不是全部。

增量 DOM 的真正好处是它优化了内存使用。

当涉及到手机等内存容量较低的设备时，这种优化变得非常方便。此外，优化内存使用并非易事。此外，应用程序的内存使用完全取决于包大小和内存占用。

让我们看看增量 DOM 如何帮助减少这两个参数。

1. Incremental DOM 是可摇树的（Tree-Shakable）

摇树并不是什么新鲜事。它指的是在构建过程中删除不需要的代码的步骤。

增量 DOM 充分利用了这一点，因为它使用基于指令的方法。如前所述，增量 DOM 在编译之前将每个组件编译为一组指令，这有助于识别未使用的指令。因此，它们可以在编译时删除。

而虚拟 DOM 是不可摇树的，因为它使用解释器，并且无法在编译时了解未使用的代码。

2.减少内存使用

如果你了解了虚拟 DOM 和增量 DOM 的主要区别，你应该已经知道这背后的秘密了。

与虚拟 DOM 不同，增量 DOM 在重新渲染应用程序 UI 时不会生成真实 DOM 的副本。此外，如果应用程序 UI 没有变化，增量 DOM 不会分配任何内存。大多数时候，我们会重新渲染应用程序而无需进行任何重大修改。所以遵循这种方法可以大大节省设备的内存。

似乎增量 DOM 有一个解决方案来减少虚拟 DOM 中的内存占用。但是您可能想知道为什么其他框架不使用它？

有一个权衡

尽管增量 DOM 通过采用更有效的方法来计算差异来减少内存使用，但该方法比 Virtual DOM 更耗时。

因此，在决定增量 DOM 和虚拟 DOM 时，需要在速度和内存使用之间进行权衡。

最后的想法

在这两种文档对象模型 (DOM) 中，虚拟 DOM 长期以来一直处于领先地位。有人说 “虚拟 DOM 因为 React 而流行”，另一方面，React 主要受益于这个 Virtual DOM 概念。

因此很明显，虚拟 DOM 提供的速度和性能提升帮助 React 与竞争对手竞争。

Virtual DOM 的优缺点

让我们看看虚拟 DOM 的一些主要优点，

高效的 “差异化” 算法（diff）。
简单并有助于提高性能。
它可以在没有 React 的情况下使用。
轻量的。
允许在不考虑状态转换的情况下构建应用程序。

虽然快速高效，但有一个陷阱。

这种差异化过程确实减少了真实 DOM 的工作量。并且它需要将当前的 DOM 状态与之前的状态进行比较以识别变化。为了更好地理解这一点，让我们看一个小的 React 代码示例：

function WelcomeMessage(props) {
  return (
    <div className="welcome">
      Welcome {props.name}
    </div>
  );
}

假设 props.name 的初始值为 “Chameera”，后来改为 “Reader”。整个代码中唯一的变化就是 props.name，不需要更改 DOM 节点或比较 <div> 标签内的属性。但是，使用 diffing 方法，必须通过所有步骤来识别更改。

我们可以在开发过程中看到大量类似这样的细微变化，比较 UI 中的每个元素无疑是一种开销。这可以被认为是虚拟 DOM 的主要缺点之一。

但是，增量 DOM 有一个解决这个高内存使用问题的方法。

Incremental DOM 的优缺点

正如我之前提到的，增量 DOM 带来了一种解决方案，通过使用真实 DOM 跟踪更改来减少虚拟 DOM 中的内存消耗。这种方法大大减少了计算开销，并提高了应用程序的内存使用率。

因此，这是使用增量 DOM 优于虚拟 DOM 的主要优势，我们可以列出增量 DOM 的其他一些好处，如下所示：

易于与许多其他框架集成。
它的简单 API 使其在定位模板引擎方面非常强大。
适用于基于移动设备的应用程序。

在大多数情况下，增量 DOM 不如虚拟 DOM 最快。

尽管增量 DOM 带来了减少内存使用的解决方案，但该解决方案会影响增量 DOM 的速度，因为差异计算比虚拟 DOM 方法需要更多时间。因此，我们可以将此视为使用增量 DOM 的主要缺点。

这两种 DOM 都有自己的优势，我们不能说虚拟 DOM 更好，或者增量 DOM 更好。但是，我可以肯定的是，虚拟 DOM 和增量 DOM 都是很好的选择，它们可以毫无问题地处理动态 DOM 更新。

参考

github.com/google/incr…

本文翻译自 blog.bitsrc.io/incremental…

[译文]Incremental DOM vs Virtual DOM