What does repaint do?
Repaint is a stage of the browser's rendering process where the visual appearance of elements is redrawn without changing their geometry or position in the document.
In other words, the browser does not recalculate layout, it only updates pixels.
Short answer for an interview
Repaint is the process of repainting elements when visual properties change (for example, color, background, visibility), while their size and position stay the same.
A bit more detail
The browser typically goes through these rendering stages:
DOM → CSSOM → Render Tree → Layout → Paint → Composite
Repaint happens at the Paint stage.
For example, repaint is triggered by changes to:
colorbackgroundborder-colorvisibilitybox-shadowoutline
Example:
element.style.backgroundColor = "red";No layout is needed, only repaint.
Important for performance
Repaint is cheaper than reflow (layout), but it can still be expensive with:
- a large number of elements
- frequent changes
- animations driven by JS
That's why animations often use:
transformopacity
Because they can be handled on the compositor layer, bypassing repaint.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.