Virtual Dom 和 Shadow Dom

「这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战」

本文探讨DOM、Virtual DOM 和 Shadow DOM 的概念以及它们的区别和联系。

1.DOM

DOM是文档对象模型的简写 ，它是一种通过对象表示结构化内容的方式。 HTML、XHTML、XML 是编写结构化内容的方法。
当浏览器呈现 HTML 页面时，它会在幕后编译此 HTML 并生成一个 DOM 对象。 这个 DOM 对象可以被 JavaScript 和 CSS 访问及操作，例如 当我们单击按钮时，会触发DOM单击事件，JavaScript 可以通过该事件侦听和操作 DOM 以显示弹出对话框。

当 DOM 对象发生任何变化时，浏览器会重新渲染整个页面。 这种方式，DOM的更改在性能方面是昂贵的。

为了解决这个问题，出现了新的概念：

2.Virtual DOM

• 虚拟 DOM 是真实 DOM 的内存表示。
• 流行的 UI 框架 React.js 和 Vue.js，都使用虚拟 DOM。
• 虚拟 DOM 的概念主要是为了解决性能问题，方法如下：
  1. DOM 中的任何更新首先应用于虚拟 DOM，而不是直接应用于实际 DOM。然后通过 diffing算法与实际DOM进行比较 并仅重新渲染更改的元素从而将更改高效率的应用于实际的DOM中。
  2. 除此之外，它可以一次收集多个更改来执行，所以不是每一个更改都会导致重新渲染，而是在从虚拟 DOM 到实际 DOM执行一组更改后才重新渲染一次。

3.Shadow DOM

• 我们可以将 shadow DOM 视为 DOM 中的 DOM。 一个真实的 DOM 可以有许多shadow DOM，每个shadow DOM 都有自己独立的 DOM 树，具有自己的元素和样式，与真实 DOM 完全隔离。
• Shadow DOM 的概念被大多数浏览器原生支持，包括 Firefox、Chrome、Opera 和 Safari。
• 我们可以遵循 Shadow DOM 概念的制作可重用的Web 组件，Web组件的元素和样式隐藏在 Shadow DOM 中，不受外部 DOM 的影响。 Shadow DOM 并不是一个新概念 浏览器多年来一直使用 shadow DOM 来创建复杂的组件并为其设置样式，例如表单元素。 让我们以范围输入元素为例。 要在页面上创建一个范围输入元素，我们所要做的就是添加以下元素：

<input type="range">

该元素产生以下组件：

如果我们深入挖掘，我们会看到这个 元素实际上是由几个较小的