Layer Promotion
ELI5 — The Vibe Check
Layer Promotion is when the browser puts an element on its own compositor layer, like giving it a VIP pass. The element can then be animated independently by the GPU. It happens automatically for animated transforms, or you can trigger it with will-change. But too many layers eat your GPU memory.
Real Talk
Layer promotion occurs when the browser creates a separate compositor layer for an element, allowing it to be transformed and animated independently on the GPU. Triggers include 3D transforms, will-change, animated opacity, and certain CSS properties. Each layer consumes GPU memory, so promotion should be intentional.
When You'll Hear This
"The animated element was janky until we promoted it to its own layer" / "Chrome DevTools Layers panel shows which elements have been promoted — check for layer explosion"
Related Terms
Compositing
Compositing is the final step where the browser assembles all the painted layers into the image you see on screen, like stacking transparent sheets in a pr...
GPU Acceleration
GPU acceleration is when the browser offloads rendering work to your graphics card instead of making the CPU do everything.
Repaint
A repaint is when the browser redraws pixels because you changed something visual like a color or shadow.
Will-Change
Will-change is like telling the browser 'heads up, I'm about to animate this thing.' The browser pre-allocates resources so the animation is smooth.