Comparison
CompositingvsLayer promotion
Compositing
the animation stays smooth even while your JavaScript is busy, because it never touches the main thread.
The final stage, where painted layers are assembled into the image on screen, usually on the GPU and on a separate thread. `transform` and `opacity` can be changed at this stage alone, which is why animating them stays at sixty frames per second while animating `top` or `width` does not. Compositing is the escape hatch from the main thread, and the reason every animation guide tells you to use those two properties.
Full entry →Layer promotion
you added `will-change: transform` to make the animation smooth and the tab's memory use went up.
Giving an element its own compositor layer so it can be moved or faded without repainting anything around it. It is what makes a transform animation cheap, and it is requested explicitly with `will-change` or implicitly by properties like 3D transforms. Every layer costs GPU memory and adds work to the compositing step, so promoting dozens of elements makes scrolling worse rather than better.
Full entry →