Comparison
CompositingvsRepaint
Compositing
the animation stays smooth even while your JavaScript is busy, because it never touches the main thread.
The final stage, where painted layers are assembled into the image on screen, usually on the GPU and on a separate thread. `transform` and `opacity` can be changed at this stage alone, which is why animating them stays at sixty frames per second while animating `top` or `width` does not. Compositing is the escape hatch from the main thread, and the reason every animation guide tells you to use those two properties.
Full entry →Repaint
you changed a colour and nothing moved, but the browser still had to redraw those pixels.
Filling in the pixels for boxes whose geometry has not changed: colours, backgrounds, shadows, borders, text. It is cheaper than reflow because no positions are recomputed, but it is not free, and a full-page repaint on a complex background still misses frames. Every reflow forces a repaint of what moved; a repaint does not force a reflow, and that asymmetry is the whole reason the distinction is worth knowing.
Full entry →