GPU Compositing Layers
Compositing layers are independently rasterized surfaces the browser composes on the GPU; promoting animations to transform and opacity on their own layer keeps them off the main thread.
Definition
The renderer splits the page into layers that are rasterized separately and composited into the final image by the GPU. Elements animated with transform or opacity, or marked with will-change, can be promoted to their own layer so those animations run purely in the compositor without repainting or layout on the main thread.
Context and scope
Tuned when animations jank: scrolling carousels, sliding drawers, spinners. Also the reason excessive will-change and huge layer counts cause memory blowups and slow rasterization.
Common misconceptions
- Layer promotion speeds up all animation — it helps transform and opacity; animations of width or color still repaint
- will-change is free — every promoted layer costs GPU memory and rasterization, so blanket usage harms
- Layers eliminate main-thread work — only compositor-driven animations do; scripted layout still runs on the main thread
Anti-patterns
- Sprinkling will-change across dozens of static elements and multiplying GPU memory per tab
- Animating top/left or box-shadow and wondering why the promoted layer still repaints each frame
- Promoting an element containing a huge image, creating an enormous texture that stalls rasterization
Related concepts
Related examples
Authoritative source
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
What it is
The final pixels come from compositing pre-rasterized surfaces. If an animation only changes where a surface sits or how opaque it is, the compositor can produce new frames alone: no style recalculation, no layout, no paint, no main thread. That is the mechanism behind smooth 60fps motion while the main thread is busy.
How it works
Certain conditions create layer promotion: 3D transforms, will-change hints, video, canvas, and composited animations. The engine rasterizes each layer at a resolution, uploads textures, and composes them per frame. Layer bloat manifests as tile memory, upload bandwidth, and slower raster on weak GPUs.
When to use it
Move carousels, drawers, indicators, and parallax to transform and opacity. Hint promotion sparingly and remove it after animations finish. Inspect the Layers panel to see surface count and memory before and after changes.
Pitfalls
Promotion is not a global performance knob: layers over many elements degrade. Text rendering can change on promoted surfaces due to raster scale differences. Compositor animations cannot fire scroll-linked effects that need layout — use well-supported scroll-driven CSS animations where available.