Repaint
ELI5 — The Vibe Check
A repaint is when the browser redraws pixels because you changed something visual like a color or shadow. It's like changing the paint color on a wall — the wall doesn't move, but someone still has to repaint it. It's expensive if you do it every frame.
Real Talk
A repaint occurs when visual changes (color, visibility, shadow) require the browser to redraw affected pixels without altering layout. Repaints are less costly than reflows but still impact performance when triggered frequently, especially on large or complex elements.
When You'll Hear This
"Changing background-color triggers a repaint but not a reflow" / "Batch your DOM updates to minimize unnecessary repaints"
Related Terms
Compositing
Compositing is the final step where the browser assembles all the painted layers into the image you see on screen, like stacking transparent sheets in a pr...
GPU Acceleration
GPU acceleration is when the browser offloads rendering work to your graphics card instead of making the CPU do everything.
Reflow
A reflow is when the browser recalculates the size and position of everything on the page because you changed one element's layout.