Compositing
Definition
The final step in the rendering pipeline. The browser separates parts of the page into distinct 'layers' (like Photoshop layers), paints them independently, and then uses the GPU to smash them together onto the screen.
Explain Like I'm New
If you animate a box moving across the screen using `transform: translateX()`, the browser gets smart. It promotes that box to its own independent 'Photoshop layer'. Because it's on its own layer, moving it doesn't affect the background layer at all. There is NO Reflow. There is NO Repaint. The GPU just slides the layer across the screen.
Real World Example
This is the absolute secret to 60 FPS animations. You should ONLY ever animate `transform` and `opacity`, because these are the only two properties that trigger GPU Compositing without triggering Reflow or Repaint.
Common Use Cases
- •60 FPS silky smooth animations
Interactive Example
Interview Questions
basic
- What piece of computer hardware handles Compositing?
intermediate
- What two CSS properties are safe to animate because they only trigger Compositing?