Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить reflow (layout)?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Reflow (або layout)** - це процес, за якого браузер обчислює геометрію і позицію всіх елементів на сторінці: де що перебуває, які розміри, як усе взаємодіє.

---

### Коли відбувається reflow:

- додавання, видалення або переміщення DOM-елементів
- зміна розмірів (наприклад, `width`, `height`, `padding`, `margin`)
- зміна шрифту, inline-контенту
- зміна стилів, що впливають на потік (наприклад, `display`, `position`)
- читання розмірів через JS (наприклад, `element.offsetHeight`): браузер примусово завершує попередні зміни

---

### Чому це важливо:

- **Reflow - дорога операція.** Вона вимагає перерахунку всіх залежних елементів.
- Чим більший і складніший DOM, тим повільніше відбувається layout.
- Вкладені елементи (nested layouts) → каскад перерахунків → лаги.

---

### Приклад:

```js
element.style.width = '500px';
console.log(element.offsetHeight);
```

→ браузер зобов'язаний виконати reflow до логування, інакше `offsetHeight` буде некоректним. Це називається forced synchronous layout: один із головних вбивць продуктивності.

---

### Reflow vs Repaint:

| Процес | Що робить | Коли викликається |
|---|---|---|
| **Reflow** | Перераховує розміри і позиції | `width`, `display`, `margin`, DOM-зміни |
| **Repaint** | Перемальовує стиль (кольори тощо) | `background`, `color`, `visibility` |

---

**Висновок:**
Reflow - це момент, коли браузер думає, де що має перебувати. Якщо змушувати його думати часто і неочікувано, інтерфейс гальмує, смикається і дратує користувача.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати202 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.