What a layer is
A compositing layer is a separately rasterized surface the GPU can move, fade, and transform independently. Most of a page lives on one layer, but the browser promotes some elements to their own.
Why promote
- A promoted element can be animated by the compositor without repainting neighbors.
- Scrolling and transforms become cheaper because only the layer moves.
What triggers promotion
- A 3D transform or the will change hint set to transform or opacity.
- Video, canvas, and certain animated elements.
- Elements with fixed position in some scrolling contexts.
The cost of overdoing it
Each layer consumes GPU memory and adds compositing overhead. Promoting hundreds of elements, sometimes called a layer explosion, can make things slower and exhaust memory. The will change property left on permanently is a common cause.
Practical rule
Promote the few elements you actively animate, set will change just before the animation, and remove it after. Measure layer counts in dev tools rather than guessing.
Key idea
Layer promotion makes animating an element cheap but costs GPU memory, so promote only the elements you actually animate.