Skip to main content

Що робить reflow (layout)?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

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 - це момент, коли браузер думає, де що має перебувати. Якщо змушувати його думати часто і неочікувано, інтерфейс гальмує, смикається і дратує користувача.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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