What is reflow and repaint in CSS?

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

Explain a bit more

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 */

Example code

div.style.background = "red"; /* triggers repaint only */ Key Takeaway: Minimize layout changes; batch DOM updates to improve performance.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.