影子DOM是否像React.js中的虚拟DOM一样快？ [英] Is shadow DOM fast like Virtual DOM in React.js?
问题描述
在项目中实现Shadow DOM将使它们更快地像React使用的虚拟DOM虚拟DOM
虚拟DOM是为了避免DOM的不必要的更改，这是昂贵的性能，因为DOM的更改通常会导致重新渲染这一页。虚拟DOM还允许收集几个更改以便立即应用，因此并不是每一个更改都会导致重新呈现，而是重新渲染只会在将一组更改应用于DOM之后发生一次。
阴影DOM
Shadow dom主要是关于实现的封装。单个自定义元素可以实现更多或更少的复杂逻辑结合更多或更少的复杂DOM。任何复杂性的整个Web应用程序都可以通过导入和< body>< my-app>< / my-app> 添加到页面，但也更简单可重用和可组合的组件可以实现为自定义元素，其中内部表示被隐藏在阴影DOM中，如< date-picker>< / date-picker> 。 p>
样式封装
Shadow DOM也是为了避免风格被意外地应用于设计师不打算的元素，例如因为您正在使用的CSS或组件库更改了现在适用于使用相同CSS类名称的其他元素的选择器。
影子DOM和效果
即使影子DOM不是关于性能的首先，它也具有性能影响。因为样式是范围的，所以浏览器可以对某些更改进行假设，以仅影响页面的有限区域（自定义元素的阴影DOM），这可以限制重新呈现到这样一个组件的区域，而不是重新渲染整个页面。
这是>>> ， / deep / 和 :: shadow 允许在阴影DOM边界应用样式的CSS组合器已被弃用，可能会很快被删除从Chrome（其他浏览器从来没有他们AFAIK）。只有这些组合器的存在才能防止前面提到的那种优化。
Angular2 使用了这两个世界的优点。
它使用单向数据流，并仅在模型上运行更改检测。如果检测到更改，则会通过更新绑定来更新DOM，并使结构指令（如 * ngFor ， * ngIf ，...更新DOM。因此，DOM仅在模型实际更改时才更新。
Angular2使用阴影DOM（仅限于 ViewEncapsulation.Native 使用浏览器提供的样式封装功能，或（当前默认）只是通过重写添加到组件的样式来模拟样式封装，作为一种解决方法，直到本机阴影DOM和CSS变量（用于动态全局样式更改）变得广泛可用。
Does implementing Shadow DOM in my projects will make them faster like virtual DOM that's used by React?
Virtual DOM
Virtual DOM is about avoiding unnecessary changes to the DOM, which are expensive performance-wise, because changes to the DOM usually cause re-rendering of the page. Virtual DOM also allows to collect several changes to be applied at once, so not every single change causes a re-render, but instead re-rendering only happens once after a set of changes was applied to the DOM.
Shadow DOM
Shadow dom is mostly about encapsulation of the implementation. A single custom element can implement more-or-less complex logic combined with more-or-less complex DOM. An entire web application of arbitrary complexity can be added to a page by an import and <body><my-app></my-app> but also simpler reusable and composable components can be implemented as custom elements where the internal representation is hidden in the shadow DOM like <date-picker></date-picker>.
Style encapsulation Shadow DOM is also about preventing styles being applied accidentally to elements the designer didn't intend to, for example because the CSS or components library you are using changed a selector that now applies to other elements that use the same CSS class names. Styles added to components are scoped to that component and bleeding out or in of styles is prevented.
Shadow DOM and performance
Even though shadow DOM is not about performance in the first place it also has performance implications. Because styles are scoped, the browser can make assumptions about some changes to affect only a limited area of the page (the shadow DOM of a custom element) which can limit re-rendering to the area of such a component, instead of re-rendering the entire page.
This is the reason the >>>, /deep/, and ::shadow CSS combinators, which allowed to apply styles across shadow DOM boundaries, were deprecated and are subject to be removed soon from Chrome (other browsers never had them AFAIK). The mere existence of these combinators prevents the kind of optimization mentioned in the previous paragraph.
Angular2 uses the advantages of both worlds.
It uses unidirectional data flow and runs change detection on the model only. If it detects changes it causes the DOM to be updated by updating bindings and make structural directives like *ngFor, *ngIf, ... update the DOM. Therefore the DOM is only updated when the model actually changed.
Angular2 uses shadow DOM (only with ViewEncapsulation.Native which is currently not the default) to utilize style encapsulation capabilities provided by the browser, or (current default) just emulate style encapsulation by rewriting styles added to components, as a workaround until native shadow DOM and CSS variables (for dynamic global style changes) become widely available.
这篇关于影子DOM是否像React.js中的虚拟DOM一样快？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
