-
Notifications
You must be signed in to change notification settings - Fork 773
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Possible performance issue with double forced reflow #761
Comments
@PierreDuc Thank you for tracking this down. I've removed the duplicate function calls in #773. As for the calls to |
@CaerusKaru It's seems like that |
Excellent suggestion, it's been moved in the latest commit on the PR. |
* remove duplicate initialization calls in most directives * remove `getDisplayStyle` call from BaseDirective `ngOnInit` Fixes #761
Nice, just an easy benchmark shows that the flex-layout library is now 75% faster 👍 |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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 thengOnChanges
and after that in thengOnInit
.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 thelayout
input, it will always go through thengOnChanges
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 thengOnInit
hook has already ran. And if so, execute the function. This needs to be done for theLayoutGapDirective
anyways, because it needs to be executed inside thengAfterViewInit
.Another thing that I noticed is the cpu hungry
_getDisplayStyle
inside every directive that extends theBaseDirective
. 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.
The text was updated successfully, but these errors were encountered: