Paint fills pixels
After layout decides where boxes sit, paint rasterizes their visual content: text, colors, borders, shadows, and images. The browser records a list of draw operations for each layer.
Composite assembles layers
A page is often split into multiple layers. Compositing draws these layers in the right order, applying transforms and opacity, to produce the final frame. This work can run on the compositor thread, separate from the main thread.
Why the split helps
- A change that only moves or fades a layer can be done by compositing alone, with no repaint.
- The compositor thread keeps animating even when the main thread is busy with JavaScript.
Paint is not free
- Large paint areas, blurs, and shadows are expensive to rasterize.
- Repainting a big region every frame burns time even if layout is unchanged.
Optimizing
- Animate transform and opacity to stay in the composite stage.
- Use dev tools to highlight paint flashing and shrink the painted region.
- Avoid forcing repaints with properties like background color during animation.
Key idea
Paint rasterizes box content while composite stitches layers; animating transform and opacity stays in composite and skips repaint.