真实 DOM、虚拟 DOM、影子 DOM，它们有什么区别？

ShadowDOM 有三种类型。

真实 DOM、虚拟 DOM 和影子 DOM，我的天！让我们深入了解一下它们是如何协同工作，创建一个简洁、高效的文档对象模型的。

DOM （文档对象模型）正如其名。网站的 HTML 树由一个名为 `<document>` 的对象表示document。该对象包含 HTML 树元素的模型，可以通过对象点号表示法方便地访问。

document.head`{{ section }}` 将返回<head></head>树的某个部分，`{{ section }} document.body` 将返回<body></body>树的某个部分，依此类推。您还可以使用点号表示法来操作 DOM。例如：`{{ body }}`document.body.style.background = ‘red’将把 body 的背景颜色更改为红色。您可以在Mozilla 的 Web 文档中查看更多关于 DOM API 的信息。

这个 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 浏览器开发者工具中的“闪烁绘图”功能来查看可视化效果：

选中该复选框，然后操作页面，任何 DOM 更改都会用绿色框突出显示。

最后，我们来看看神秘的影子 DOM。它允许将隐藏的 DOM 树附加到常规 DOM 树中的元素上。可以使用Web API创建自定义元素，这些元素完全由影子 DOM 控制。需要注意的是，真正的 DOM 和影子 DOM 是完全不同的领域。对真正 DOM 中的元素所做的更改不会应用到影子 DOM 中的元素，反之亦然。

如果你在使用开发者工具检查 HTML 元素时，发现某个元素在页面上明明存在却不在列表中，那它很可能位于 Shadow DOM 中。视频播放器就是一个典型的例子。在页面上，你可以看到播放器的内部 UI：播放按钮、快进按钮、分享按钮等等，但在实际的 DOM 中却看不到它们。它们是由 Shadow DOM 控制的。