What does reflow (layout) do?

Reflow (or layout) is the process by which the browser calculates the geometry and position of every element on the page: where things sit, what size they are, how everything interacts.

---

#When reflow happens:

• adding, removing, or moving DOM elements
• changing dimensions (for example, width, height, padding, margin)
• changing fonts or inline content
• changing styles that affect flow (for example, display, position)
• reading dimensions via JS (for example, element.offsetHeight): the browser is forced to finish pending changes first

---

#Why it matters:

• Reflow is an expensive operation. It requires recalculating every dependent element.
• The bigger and more complex the DOM, the slower layout becomes.
• Nested elements (nested layouts) → a cascade of recalculations → lag.

---

#Example:

→ the browser must perform reflow before logging, otherwise offsetHeight would be incorrect. This is called forced synchronous layout: one of the main performance killers.

---

#Reflow vs Repaint:

---

Conclusion: Reflow is the moment the browser thinks about where things should be. Forcing it to think often and unexpectedly makes the interface lag, jump, and frustrate the user.