Angular2 模拟封装会影响性能吗？答案

【问题标题】：Does Angular2 emulated encapsulation affect performance ?Angular2 模拟封装会影响性能吗？
【发布时间】：2022-01-19 18:44:19
【问题描述】：

我问这个问题是因为我们现在正在构建的应用程序非常缓慢，尽管我们并没有做疯狂的事情！。

只是一个简单的多步骤表单，假设有 20 个字段。该应用程序非常慢，特别是在滚动时我可以直观地看到滞后。所有组件都是定制和定制的，所以我们没有使用任何第三方库。

我尝试将所有组件封装起来：ViewEncapsulation.None，我不能 100% 说这解决了问题，但它确实让它变得有点顺利。

有没有人在这方面有很好的经验？

【问题讨论】：

标签： angular

【解决方案1】：

首先，如果您调查性能，请确保启用prodMode。在devMode 中，更改检测始终运行第二轮。

ViewEncapsulation.Emulated（默认）在解析和重写样式时确实会产生一次性的性能影响。因为这个构建步骤很快就会提供，所以这是在 Angular 应用程序提供给客户端之前静态完成的。

ViewEncapsulation.Native 可以提高性能，因为它允许浏览器在将重新渲染限制为单个组件而不是整个页面时更好地优化重新渲染。不能保证浏览器确实进行了这种优化。但这是阴影穿透选择器 /deep/ (>>>) 和 ::shadow 从 shadow DOM 规范中删除的主要原因。

另见Is shadow DOM fast like Virtual DOM in React.js?

【讨论】：

【解决方案2】：

事实上，它会影响性能。恕我直言，这就是为什么像 @angular/material 这样的 UI 库使用 ViewEncapsulation.None 的原因。模拟的影子 DOM 意味着对于每个组件，新的样式表都会添加到 DOM 中，因此样式呈现会更慢。

奇怪的是，屏幕上有 20 个组件出现问题，但我绝对可以想象有几十个或数百个组件时性能会下降。当该组件具有复杂且未优化的 CSS 规则时更是如此

【讨论】：

当所有的 css 需要传输时，更不用说网络拥塞了。想象一下，当您的样式取决于某个库（例如 bootstrap）并为每个需要调整的组件重新导入它时......我对处理这个问题的最佳方法很感兴趣（ViewEncapsulation.None 是走）？