问题描述
我之所以问这个问题，是因为尽管我们没有做疯狂的事情，但我们现在正在构建的应用程序却非常慢！.
I'm asking this question because the app we're building right now is awfully slow , although we're not doing crazy things !.
一个简单的多步骤表单，可以说20个字段.该应用程序非常慢，特别是在滚动时，我可以从视觉上看到滞后现象.所有组件都是定制和自定义的，因此我们不使用任何第三方库.
Just a simple multi step form with lets say 20 fields.The app is extremely slow , specially on scroll I can visually see the lagging .All the components are bespoke and custom, so we're not using any third party library.
我试图将所有组件都封装为:ViewEncapsulation.None，我不能100％地说这可以解决问题，但绝对可以解决问题.
I tried to make all the components to be encapsulation:ViewEncapsulation.None , I cannot 100% say that this fixed the issue , but it definitely made it a little smooth.
有人在这方面有很好的经验吗?
Is there anyone with good experience on this ?
推荐答案
实际上，它会影响性能.这就是恕我直言，为什么像 @ angular/material 这样的UI库使用 ViewEncapsulation.None 的原因.模拟的影子DOM意味着对于每个组件，都将新的样式表添加到DOM中，因此样式渲染速度较慢.
In fact, it can affect the performance. That's IMHO the reason why UI libraries like @angular/material are using ViewEncapsulation.None. The emulated shadow DOM implies that for every component, new stylesheet is added into the DOM and therefore the style rendering is slower.
奇怪的是，屏幕上有20个组件，但是我可以肯定地想象到数十个或数百个组件会导致性能下降.当该组件具有复杂且未优化的CSS规则时，甚至更多
It is strange that you have issues with 20 components on the screen but I can definitelly imagine performance slowdown with dozens or hunderds of components. Even more when this component has complicated and non-optimized CSS rules
这篇关于Angular2仿真封装会影响性能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！