Compositing
ELI5 — The Vibe Check
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 projector. Elements on their own GPU layer can be moved and animated without bothering anyone else. VIP treatment.
Real Talk
Compositing is the rendering pipeline stage where independently painted layers are combined into the final screen image. Elements promoted to compositor layers (via transform, opacity, will-change) can be animated without triggering layout or paint, enabling smooth 60fps animations.
When You'll Hear This
"Opacity and transform animations only trigger compositing — that's why they're so smooth" / "Too many compositing layers eat GPU memory on mobile devices"
Related Terms
GPU Acceleration
GPU acceleration is when the browser offloads rendering work to your graphics card instead of making the CPU do everything.
Reflow
A reflow is when the browser recalculates the size and position of everything on the page because you changed one element's layout.
Repaint
A repaint is when the browser redraws pixels because you changed something visual like a color or shadow.