【发布时间】：2017-05-25 16:17:43
【问题描述】：
我一直在阅读 Angular 2 的 style encapsulation 方法，您可以在其中将样式直接写入组件。
此方法可以使用原生 shadow dom 或模拟的。对组件特定样式使用这两种方法有哪些性能优势？
【问题讨论】：
标签： css angular sass encapsulation
【发布时间】：2017-05-25 16:17:43
【问题描述】：
很遗憾，但是模拟样式封装存在性能问题。问题是，Angular 使用属性来应用 CSS 规则。而且它们的使用效率不高，尤其是在当前版本的 Edge 中。
在这里，您可以看到一些基准作为证明。 https://medium.com/@andreygoncharov/edge-hates-you-attributes-d15faf162939
所以在 2017 年，也许你应该在开发大型项目时避免使用 Angular 样式封装。
您可以在这里查看issue的状态。
【讨论】：
对于模拟没有性能优势。它只是样式封装，自动将样式范围限定到特定组件。
模拟
使用 AoT，样式重写是在构建时完成的，否则在运行时需要相当长的时间来分析和重写样式。
然后将样式添加到<head> 元素。
原生阴影 DOM
有一些性能优势，因为在某些情况下浏览器可以知道某些必需的重新渲染是组件本地的，否则可能会导致整个页面重新渲染。不过我不知道具体的例子。
【讨论】：
-
太棒了！现在我们到了某个地方......而不是像一些混蛋那样投票结束这个问题......我看到了封装样式的基于开发的好处，但文档中没有表达的性能好处将是采用的主要原因使用哪种方法最有好处的工作流。
-
Emulation 没有提供性能优势，并且由于主题故事太弱，所以没有太多使用原生。 Angular 不支持 CSS 变量，恕我直言，即使这些变量也太有限了。此外，性能优势并非特定于 Angular，而是特定于影子 DOM。恕我直言，在 Angular 中重复所有浏览器文档是没有意义的。