Possible performance issue with double forced reflow

Bug, feature request, or proposal:

Bug/performance proposal

What is the expected behavior?

Not having two forced reflows on directive initialisation

What is the current behaviour?

Two (or more) forced reflows on directive initialisation

What are the steps to reproduce?

One example is in the fxLayoutDirective. You can see the _updateWithDirection being called inside the ngOnChanges and after that in the ngOnInit.

I might be wrong, but from what I can tell from the profiler this calls the heavy _updateWithDirection twice on initalisation. Because you initialise the directive by using the layout input, it will always go through the ngOnChanges hook anyways. Which makes this line obsolete, or better yet, causing unnecessary recalculations.

I noticed in the profiler that these updates are pretty intensive for the cpu, by causing forced reflows

Other examples:

FlexAlignDirective._updateWithValue FlexOrderDirective._updateWithValue FlexDirective._updateStyle FlexLayoutAlignDirective._updateWithValue

Instead of removing the corresponding lines, you could also check inside the ngOnChanges if the ngOnInit hook has already ran. And if so, execute the function. This needs to be done for the LayoutGapDirective anyways, because it needs to be executed inside the ngAfterViewInit.

Another thing that I noticed is the cpu hungry _getDisplayStyle inside every directive that extends the BaseDirective. If the current element does not use the media queries .xs, .xl ..., how necessary is this call?

What is the use-case or motivation for changing an existing behaviour?

To have a faster flex framework

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All

Is there anything else we should know?

Like I said, my assumptions might be wrong, and there is actually a valid reason for executing it twice.

[PierreDuc]

Nice, just an easy benchmark shows that the flex-layout library is now 75% faster 👍

[CaerusKaru]

Excellent suggestion, it’s been moved in the latest commit on the PR.