Angular的组件样式封装对性能有好处吗?

Ben*_*cot 6 css encapsulation sass angular

我一直在阅读有关Angular 2的样式封装方法的信息,您可以在其中将样式直接写入组件中。

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

Mik*_*sky 5

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

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

因此,在2017年,开发大型项目时,您应该避免使用Angular样式封装。

在这里,您可以检查的地位问题


Gün*_*uer 4

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

效仿的

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

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

原生 Shadow DOM

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

  • 伟大的!现在我们已经取得了一些进展...而不是像某些混蛋那样投票结束问题...我看到基于开发的封装样式的好处,但文档中未表达的性能好处将是采用的主要原因采用具有最大优势的方法的工作流程。 (2认同)