文档对象模型(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相反，影子DOM以较小的片段出现，意味着(与虚拟DOM不同)它不是整个DOM的完整代表。
它也被证明对CSS范围有帮助。一个应用程序中使用的样式可能会重叠，这使得处理它们变得很麻烦。影子DOM确保在单个影子DOM元素内创建的样式保持隔离并在其自身范围内。

影子DOM和虚拟DOM的区别

虚拟DOM 影子DOM
虚拟DOM围绕着解决性能问题。 影子DOM围绕着封装的概念。
虚拟DOM是一个实际DOM的完整代表。 影子DOM不是整个DOM的完整代表。
虚拟DOM把几个变化组合在一起，做一次重新渲染而不是许多小的变化。 影子DOM将DOM元素的子树添加到文档的渲染中，而不是将其添加到主文档的DOM树中。
虚拟DOM创建了整个DOM对象的一个副本。 影子DOM创建的DOM对象的小片段有自己的、孤立的范围。
虚拟DOM并不隔离DOM。 影子DOM隔离了DOM。
虚拟DOM对CSS的范围划分没有帮助。 影子DOM有助于CSS范围的确定。