1

I'm asking this question because the app we're building right now is awfully slow , although we're not doing crazy things !.

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.

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 ?

2 Answers2

3

At first if you investigate performance, ensure prodMode is enabled. In devMode change detection always runs a 2nd turn.

ViewEncapsulation.Emulated (default) does have a one-time performance impact when the styles are parsed and rewritten. For this build step will be provided soon, so this is done statically before the Angular application is even served to the client.

ViewEncapsulation.Native can improve performance because it allows the browser to better optimize re-rendering when it can limit the re-render to a single component instead of the whole page. There is no guarantee that the browser actually does this kind of optimization. But this was the main reason why the shadow piercing selectors /deep/ (>>>) and ::shadow were removed from the shadow DOM spec.

See also Is shadow DOM fast like Virtual DOM in React.js?

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
3

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.

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

Palpatine1991
  • 750
  • 6
  • 13
  • Not to mention the network congestion when all that css needs to be transmitted. Imagine when you have styles depending on some lib (e.g. bootstrap) and its re-imported for each component that needs a bit of tuning... I am interested in what is the best way to handle this (is ViewEncapsulation.None the way to go)? – Vincent Pazeller Apr 22 '20 at 10:51