Angular的组件风格封装是否有性能优势？

我一直在阅读有关Angular 2的style encapsulation方法，您可以直接在组件中编写样式。Angular的组件风格封装是否有性能优势？

此方法可以使用本机阴影dom或模拟的阴影。对组件特定的样式使用哪些性能优势？

2017-01-11 BenRacicot

对于仿真没有性能好处。这只是样式封装，可以自动将样式范围限定到特定组件。

仿真

随着AOT风格重写在构建时进行，否则它需要相当长一段时间，在运行时进行分析和重写的样式。

样式然后被添加到<head>元素。

本地影子DOM

有一些性能优势，因为在某些情况下，浏览器就可以知道了一些必要的重新渲染是本地的一个组成部分，产生会导致整个页面重新渲染。我不知道一个具体的例子。

2017-01-11 15:44:24

太棒了！现在我们到了某个地方......而不是投票结束这个问题，因为有些混蛋......我看到基于开发的封装风格的好处，但是在文档中没有表达的性能优势将成为采用采用任何方法的工作流程都具有最大的优势。 – BenRacicot

仿真不会提供性能优势，原生并没有太多用处，因为主题故事太弱。 Angular不支持CSS变量，即使这些变量太有限恕我直言。此外，perf的好处并非特定于Angular，而是影响DOM。恕我直言，重复Angular中的所有浏览器文档是没有意义的。 –

很遗憾，但是仿真样式封装存在性能问题。事情是，Angular使用属性来应用CSS规则。而且它们的使用效率不高，特别是在当前版本的Edge中。

所以在2017年，也许你应该避免在开发大项目时使用Angular风格的封装。

在这里您可以检查issue的状态。

2017-10-02 16:01:21

回答