阴影DOM像R中的虚拟DOM一样快eact.js?

Question

在我的项目中实现shadowdom会让它们像React使用的虚拟DOM一样更快吗？

Answer 1

不，阴影DOM和虚拟DOM是不相关的，尽管名称有点类似：

虚拟DOM：保留DOM的两个副本（原始副本和更新副本）的概念。在渲染之前，React会区分这两个对象，以确定是否应该对实际的DOM树应用更新。这会提高性能，因为我们只更新视图中需要它的部分，而不是整个屏幕。

影子DOM： W3C提出的Web组件规范的一部分，基本上允许将较小的DOM元素和CSS样式封装到单个DOM元素中：

示例阴影DOM元素

<my-video width="300" height="150" />

但是，

<div>
   <input type="button" style="color: blue;">Play
   <input type="button" style="color: red;">Pause
   <source src="myVideo.mp4">
</div>

因此，通过使用shadowdom，我们能够隐藏web元素的实现细节，并且只将必要的信息传递给子元素（即高度，宽度），这可能会令人困惑，非常类似于将道具传递给组件的ReactJS习惯用法。

通过以下途径提供的信息：

• http://www.funnyant.com/reactjs-what-is-it/
• http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

Answer 2

虚拟DOM

虚拟DOM是为了避免对DOM进行不必要的更改，这些更改在性能方面非常昂贵，因为对DOM的更改通常会导致页面的重新呈现。虚拟DOM还允许一次收集要应用的几个更改，因此不是每个更改都会导致重新渲染，而是在向DOM应用了一组更改后只发生一次重新渲染。

阴影DOM

影dom主要是关于实现的封装。单个自定义元素可以实现或多或少复杂的逻辑和或多或少复杂的DOM。可以通过导入和将任意复杂性的整个Web应用程序添加到页面

样式封装阴影DOM还涉及防止样式意外应用于设计器不打算应用的元素，例如，因为您正在使用的CSS或组件库更改了一个选择器，该选择器现在应用于使用相同CSS类名的其他元素。添加到构件的样式的作用域为该构件，并防止样式的溢出或插入。

阴影DOM与性能

尽管shadowdom从一开始就与性能无关，但它也会影响性能。由于样式的作用域是有限的，浏览器可以对某些更改进行假设，以仅影响页面的有限区域（自定义元素的阴影DOM），从而将重新渲染限制在此类组件的区域，而不是重新渲染整个页面。

这就是为什么

Angular2利用了两个世界的优势。

它使用单向数据流，仅对模型运行更改检测。如果检测到更改，它会通过更新绑定来更新DOM，并发出结构指令，如*ngFor，*ngIf。。。更新DOM。因此，DOM仅在模型实际更改时更新。

Angular2使用阴影DOM（仅与当前不是默认值的ViewEncapsulation.Native）利用浏览器提供的样式封装功能，或者（当前默认值）通过重写添加到组件的样式来模拟样式封装，作为一种变通方法，直到本机shadowdom和CSS变量（用于动态全局样式更改）变得广泛可用。