Repaint

Definition

The process where the browser fills in pixels on the screen (drawing colors, shadows, text, and images) after the Reflow layout geometry has been calculated.

Explain Like I'm New

Reflow is the architect drawing the blueprint. Repaint is the painter coloring the walls. If you change the `background-color` of a button, it doesn't change the size of the button, so there is no Reflow math needed. The browser just grabs its digital paintbrush and repaints the pixels.

Real World Example

Hovering over a button and changing its `color` from blue to red.

Common Use Cases

•Understanding rendering costs

Interactive Example

Interview Questions

basic

Which is heavier on CPU performance: a Reflow or a Repaint?

intermediate

Does triggering a Reflow automatically trigger a Repaint?

Flash Cards

Question

Which is heavier?

Click to reveal answer

Answer

A Reflow is vastly heavier because it requires complex layout math across the entire DOM tree.

Question

Reflow triggers Repaint?

Click to reveal answer

Answer

Yes. If you change the width of a box (Reflow), the box is now physically larger, meaning the browser MUST repaint those new pixels to fill the new space.