What is reflow and repaint in CSS?

They are part of the browser’s rendering process when the DOM or styles change.

• Reflow (Layout): Happens when the structure or geometry of the page changes (like

changing size, position, or adding elements).

→ Expensive operation since it recalculates layout.

Follow me on LinkedIn:

• Repaint: Happens when visual appearance (like color or background) changes

without affecting layout.

Example:

div.style.width = "200px"; /* triggers reflow + repaint */
div.style.background = "red"; /* triggers repaint only */

Key Takeaway:

Minimize layout changes; batch DOM updates to improve performance.