真实节点、虚拟节点与影子节点的区别

真实节点、虚拟节点与影子节点的区别

本文将深入介绍真实节点、虚拟节点与影子节点是如何协同工作共同创建一个高性能的文档对象模型。

DOM（Document Object Module文档对象模型）正如它所描述的那样。网站的 HTML 树由一个名为document的对象表示。在这个对象中，有一个 HTML 树元素的模型，可以通过document.xxx方便地访问。

• document.head将返回树的部分，
• document.body将返回树的部分，依此类推。
• 您还可以使用document.xxx的方法来操作 DOM。例如：document.body.style.background = 'red' 将正文的背景颜色更改为红色。

这个 DOM 被称为页面的真实 DOM。真正的 DOM 本身只能在每次 DOM 发生更改时同时更新整个 DOM。这使得页面更新变得非常缓慢且昂贵。这就是虚拟 DOM能诞生的缘故。

虚拟DOM是真实 DOM 的虚拟表示。该虚拟 DOM 保存在内存中并与真实 DOM 同步。React 等库将真实的 DOM 编译成 Javascript对象，这是创建更高性能更新的第一步。然后，虚拟 DOM 制作其自身的副本（我们将其称为虚拟 DOM 2）。当页面上进行更新时，它首先应用于虚拟 DOM 2。React 然后将虚拟 DOM 2 与原始虚拟 DOM（真实 DOM 的精确副本）进行比较。React 使用这种比较来快速检测真实 DOM 需要更新的位置，并仅更新这些元素而不是整个 DOM。这就是神奇的地方，只更新需要更新的内容会更快。

如果我们想查看虚拟 DOM 的运行情况，可以在 Google Chrome 的检查工具中通过Paint flashing功能查看可视化表示：

选中该框，然后使用该页面，任何 DOM 更改都将用绿色框突出显示。

最后大家比较少听到的就是shadow dom（影子节点），这允许隐藏的 DOM 树附加到常规 DOM 树中的元素。可以使用Web API创建自定义元素，这些元素仅由影子 DOM 控制。重要的是要记住，真实 DOM 和影子 DOM 是有界限。真实节点和影子节点之间的界限可以通过以下几种方式跨越：

• 可继承的样式、

• CSS属性

• Constructable Stylesheets特性

• :part（:theme并非所有浏览器都支持）样式

• 如果我们在检查工具中调试查看 HTML 元素，并且在页面上正确查看时没有看到列出的内容，那么它可能位于影子 DOM 中。最好的例子是视频播放器。在页面上，您可以直观地看到内部 UI：播放按钮、跳过按钮等，但在真实 DOM 中看不到它。它由 Shadow DOM 控制。

尽管影子节点可能难以捉摸，但如果我们需要的话，实际上是可以显示影子节点！在 Google Chrome 的检查工具中：转到设置，选择首选项，然后转到元素部分。选择Show user agent shadow DOM以在检查工具的“元素”选项卡中与真实节点一起显示任何影子节点。