文档对象模型 (DOM) 是客户端开发中遵循的流行概念。这是一种跨平台且独立于语言的基本技术。它被定义为通过对象创建逻辑结构化文档的 HTML 或 XML 文档的 API。
虚拟 DOM：
- 简单来说，虚拟 DOM 只不过是实际 DOM 的完整和完整表示。
- 由于对 DOM 的任何更改都会导致页面更频繁地重新呈现，因此虚拟 DOM 主要尝试避免对 DOM 进行任何不必要且代价高昂的更改。
- 这是通过对更改进行分组并进行一次重新渲染而不是几个小的重新渲染来实现的。
- DOM 的副本保存在内存中，用于比较 DOM 中任何地方所做的任何更改，比较以查找差异。因此，只有应用程序的那些部分被重新渲染，而不是重新渲染整个 DOM。
- VueJS 和 ReactJS 都使用虚拟 DOM。
影子 DOM：
- 另一方面，Shadow DOM 主要与封装的概念有关。它是一个可以让开发者克服 DOM 封装的工具。
- 它指的是浏览器有可能将 DOM 元素的子树添加到文档的渲染中，但不会添加到主文档的 DOM 树中。
- 因此，它隔离了 DOM 并确保组件的 DOM 是一个单独的元素，不会出现在全局 DOM 中。
- 与 DOM 不同，Shadow DOM 以较小的部分出现，这意味着(与 Virtual DOM 不同)它不是整个 DOM 的完整表示。
- 它也被证明对 CSS 范围界定很有帮助。应用程序中使用的样式可以重叠，这使得处理它们很麻烦。 Shadow DOM 确保在单个 Shadow DOM 元素中创建的样式保持隔离并在它们自己的范围内。
ShadowDOM 和 VirtualDOM 的区别
| Virtual DOM | Shadow DOM |
|---|---|
| It revolves around solving performance issues. | It revolves around the concept of encapsulation. |
| It is a complete representation of an actual DOM. | It is not a complete representation of the entire DOM. |
| It groups together several changes and does a single re-render instead of many small ones. | It adds a subtree of DOM elements into the rendering of a document, instead of adding it to the main document’s DOM tree. |
| It creates a copy of the whole DOM object. | It creates small pieces of the DOM object having their own, isolated scope. |
| It does not isolate the DOM. | It isolates the DOM. |
| It does not help with CSS scoping. | It helps with CSS scoping. |