So my app is slow. That slow part consists of iteration over medium complex components with another bunch of nested components inside

Trying to render more than one of these started to add up a LOT of scripting time, up to the point where trying to render 10 of them caused 30 second freeze.

The first and biggest culprit I found was @angular/flex-layout, which, as you know, if you managed to click deep enough inside the wiki can not handle more than a hundred of grids (since I used it inside like 10 of the nested components inside it easily added up to that critical number).

But even still, with flex-layout completely gone, trying to render 100 of these can take around 12 seconds, so I thought there must be sometimes else wrong and tried to establish a baseline on a completely fresh project. That can be found here https://github.com/fxck/ngperf.

Baseline

Iterating over 200 items, printing simple text.

That takes around 100ms from click on the button to the content being visible.

Baseline for complex tests

Iterating over 200 components with mat-card and ngClass inside

That takes around 200ms from click on the button to the content being visible.

Test 1

Adding 20 empty divs to complex baseline

That takes around 250ms from click on the button to the content being visible, most of the extra time taken by rendering, which makes sense.

Test 2

Adding 20 divs with ngClass and ngStyle on them

That takes around 400ms from click on the button to the content being visible, extra time coming from scripting.. given that's total of like 4000 new ngClasses and ngStyles, 100ms extra time spent on scripting is fair I guess

Test 3

Adding 20 components with a single div with ngClass and ngStyle inside them

Now this takes around 900ms from click on the button to the content being visible, 200 extra milliseconds coming rendering and another 200ms from scripting.

The third one confuses me the most, why would it take double the amount of time between test 2 and test 3? That makes me question everything about splitting my app into many reusable component, if there's a huge performance hit like this.

Coming back around to my actual component (https://i.imgur.com/aoyc1er.png), it has quite a few nested components, most of them have multiple states, content projection, styles, classes, so seeing how much mess can an empty component create, how many can I possibly render at once before having to resort to infinite scroll strategies?

(both repro and my app uses v10)

btw this is what rendering 20 of those components looks like WITHOUT flex-layout

and WITH flex

20 seconds of scripting time difference!