Angular的组件样式封装是否具有性能优势?

时间:2017-01-11 01:27:00

标签: css angular sass encapsulation

我一直在阅读Angular 2的style encapsulation方法,您可以将这些样式直接写入组件。

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

2 个答案:

答案 0 :(得分:3)

对于模拟,没有性能优势。它只是样式封装,可以自动将样式范围限定为特定组件。

<强>模拟

使用AoT,样式重写在构建时完成,否则在运行时需要花费相当长的时间来分析和重写样式。

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

原生影子DOM

有一些性能优势,因为在某些情况下浏览器可以知道某些必需的重新呈现是组件的本地,否则可能导致整页重新呈现。我不知道具体的例子。

答案 1 :(得分:3)

很遗憾,但是模拟样式封装存在性能问题。问题是,Angular使用属性来应用CSS规则。并且使用它们效率不高,尤其是在当前版本的Edge中。

在这里你可以看到一些基准作为证明。 https://medium.com/@andreygoncharov/edge-hates-you-attributes-d15faf162939

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

您可以在此处查看issue的状态。