[html] 第167天 Shadow DOM和Virtual DOM有什么区别？

[haizhilin2013]

第167天 Shadow DOM和Virtual DOM有什么区别？

94

[linushp]

Shadow DOM 是浏览器提供的，提供了一个小型的沙盒，隔离外界的css样式。 Virtual DOM 只是js模拟的DOM结构。

[renchaoqiong]

Shadow DOM 1.允许将隐藏的DOM树添加到常规的DOM树中——它以shadow root为起始根节点，在这个根节点的下方，可以是任意元素，和普通的DOM元素一样。

2. 必须附加在一个元素上，可以是HTML文件中的一个元素，也可以是脚本中创建的元素；可以是原生的元素 Virtual DOM 是虚拟的DOM，比如在VUE中采用虚拟dom一般是为了提高渲染效率

[wwqin]

Shadow DOM

Shadow DOM是浏览器提供的一个可以允许将隐藏的DOM树添加到常规的DOM树中——它以shadow root为起始根节点，在这个根节点的下方，可以是任意元素，和普通的DOM元素一样。

Virtual DOM

虚拟DOM是由js实现的避免DOM树频繁更新，通过js的对象模拟DOM中的节点，然后通过特定的render方法将它渲染成真实的节点，数据更新时，渲染得到新的 Virtual DOM，与上一次得到的 Virtual DOM 进行 diff，得到所有需要在 DOM 上进行的变更，然后在 patch 过程中应用到 DOM 上实现UI的同步更新。

[vkboo]

• Shadow DOM 是Web Components标准，为Web组件提供了封装，Shadow DOM使得这些东西与主文档的DOM保持分离

• Virtual DOM 是 Rect/Vue等框架实现的虚拟DOM，其本质上是JavaScript对象，用于模拟DOM对象，在需要操作DOM的地方，先操作Virtual DOM，在render到真实DOM上，以达到更好的性能