Comparison
ReflowvsRepaint
Reflow
you changed one element's width and the browser had to recompute the position of half the page.
The stage that computes the geometry of every box: size and position, in document order, with each element's result feeding the next. It is the expensive stage, because a change near the top of the tree cascades down through everything after it. Anything that changes geometry — width, padding, font size, inserting a node, changing text — triggers it, and on a large tree it costs milliseconds you cannot spare inside a frame.
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 →