HTML 解释DOM Diffing

在了解DOM Diffing是什么之前，我们应该知道DOM是什么以及它的目的是什么。在本文中，我们将了解DOM的两个版本，真实版本和虚拟版本，并探讨DOM Diffing是什么。

DOM是什么： 在正式意义上，DOM是文档的应用编程接口（API）。DOM为文档定义了一个逻辑结构，帮助开发者访问和操作文档。它非常接近文档模型。例如，考虑以下HTML 列表。

HTML

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

DOM如下所示：

如我们所见， 一个DOM很像一棵树 。

现在让我们了解Virtual DOM的概念。

让我们从为什么开始回答。每当应用程序的UI发生变化时，DOM会更新，这意味着整个树会更新，然后UI组件会重新渲染。每次进行小的更改时重新渲染UI元素会导致应用程序变慢，因此，UI越密集，我们的DOM更新就会变慢。这就是Virtual DOM的作用。Virtual DOM是上述Real DOM的虚拟表示。现在，当我们的应用程序的UI发生状态改变时，只有虚拟DOM会更新，而不是真正的DOM。接下来要问的问题是如何通过更新虚拟DOM来提高性能。

DOM Diffing: 每当UI元素的状态发生变化时，都会创建一个新的虚拟DOM。然后将新的虚拟DOM与以前的虚拟DOM进行比较。此比较被称为 DOM diffing 。

目的是对真正的DOM执行最少的操作，因此，在diffing之后，计算出更新真实DOM的最佳方法，以实现高效的UI更新。

以下图片显示了diffing过程：

图片显示出更新真实DOM尽可能地被推迟。红色节点代表状态变化；然后通过DOM差异计算变化，最后将新的虚拟DOM批量更新到真实DOM。

结论： 更新界面是非常昂贵的；批量更新真实DOM可以提高整体重绘界面的性能。