Comparison
RasterisationvsRepaint
Rasterisation
the first scroll into a long page stutters once and is smooth on the way back up.
Turning the vector description of a painted layer into an actual grid of pixels, tile by tile, often off the main thread. Browsers rasterise lazily and cache the tiles, which is why newly revealed content can hitch and previously seen content does not. Large filters, blurs and huge images make individual tiles expensive, and a layer big enough can exceed what the GPU will hold at once.
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 →