Suggest an editImprove this articleRefine the answer for “What does reflow (layout) do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**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. **Key point:** 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.Shown above the full answer for quick recall.Answer (EN)Image**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: ```js element.style.width = '500px'; console.log(element.offsetHeight); ``` → 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: | Process | What it does | When it's triggered | |---|---|---| | **Reflow** | Recalculates sizes and positions | `width`, `display`, `margin`, DOM changes | | **Repaint** | Repaints style (colors, and so on) | `background`, `color`, `visibility` | --- **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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.