The browser has multiple painted layers (bitmaps), but the screen shows only one image. Without compositing, layers would overlap incorrectly or the GPU couldn’t accelerate the final display.
Compositing combines multiple painted layers into a single image for display. It’s handled by the GPU for smooth scrolling, animations, and transforms.
- Layers ready: Painting has created bitmap layers
- GPU composites: GPU takes layers and combines them in order
- Respect z-index and stacking context
- Apply transforms, opacity, clips
- Final output: Single frame sent to display
Modern browsers promote elements to layers for:
transform,opacityanimationsposition: fixed- Video, canvas, iframe elements
- GPU-accelerated (fast, off-main-thread)
- Layers created for specific CSS properties
- Order matters: z-index, stacking context
- Enables smooth scrolling/animations without repainting
- Built from: Painting — painted layers are composited
- Builds into: GPU Rendering — compositing uses GPU
- Related: Browser Rendering — compositing is step 7
- Related: CSS Layers — promote elements to layers
- Too many layers = memory overhead
- Layer promotion with
will-changecan backfire - Compositing doesn’t fix slow JavaScript
- Not all CSS properties trigger compositing