perf(table) Coalesces style updates after style measurements to reduc… #19750
Conversation
googlebot
added
the
cla: yes
| import {from, Observable} from 'rxjs'; | ||
|
|
||
| @Injectable() | ||
| export class CoalescedStyleScheduler { |
There was a problem hiding this comment.
IIUIC, this is essentially a step towards a more generic way of scheduling and coordinating DOM updates in a way that prevents layout thrashing, but it is missing some core functionality from that. This has already been implemented in other libraries such as Google Closure - https://github.com/google/closure-library/blob/master/closure/goog/dom/animationframe/animationframe.js. Perhaps we can port that for a more flexible/powerful tool?
There was a problem hiding this comment.
If Jeremy and co are up for it, I can move this to a more common part of the cdk and have it be providedIn: 'any' rather than scoped to a table. For the purposes of this PR, I'm not looking to turn it into a fully-featured library, though.
There was a problem hiding this comment.
I'd rather keep it more tightly scoped for the time being. I believe this is something we should tackle at the framework level rather than at the library level, since then everyone can get the benefits without having to jump through extra hoops.
…e layout thrashing Exposes the CoalescedStyleScheduler for use by other related components in a table such as column resize.
kseamon
force-pushed
the
table-coalesce-measurements
branch
from
1929463
to
498ff4c
Compare
jelbourn
added
lgtm
action: merge
#19750) * perf(table) Coalesces style updates after style measurements to reduce layout thrashing Exposes the CoalescedStyleScheduler for use by other related components in a table such as column resize. * Add license * Fix column resize tests * Fixed mdc-table tests * jsdoc * more comments * lint * lint * Added _ * lint * -override * update api * prevent resource leaks * api * readonly * remove changes that are part of #19739 * Change to onStable to work around downstream test failures * api update (cherry picked from commit ef8fc4f)
In angular#19964 and angular#19750 some breaking constructor changes were made which eventually got released as a part of a patch branch which doesn't follow our breaking changes policy. These changes make the new constructor parameters optional and add fallbacks to the old behavior. Fixes angular#20422.
In angular#19964 and angular#19750 some breaking constructor changes were made which eventually got released as a part of a patch branch which doesn't follow our breaking changes policy. These changes make the new constructor parameters optional and add fallbacks to the old behavior. Fixes angular#20422.
|
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. |
…e layout thrashing Exposes the CoalescedStyleScheduler for use by other related components in a table such as column resize.
This will complement #19739, but the following measurements are taken without it. Each of these reduces the impact of the other but they'll both result in some savings (especially this one). I'm exposing the coalesced style scheduler so that it can also be used by column resize et al to coalesce along with sticky styler.
Before:
94ms script + 46ms rendering
After:
69ms script + 22ms rendering
This is scrolled down a little too far to see the effect - we're now down to one compute styles + layout before data rows are rendered and one after. Previously there were many.