Что такое Relayout?

Что такое Reflow (Relayout) в контексте веб-разработки

Reflow (также известный как Relayout или перекомпоновка) — это процесс, в ходе которого браузер пересчитывает положение и геометрию элементов на веб-странице для определения их окончательного макета. Это критически важный этап в рендеринге страницы, который происходит после Style Calculation (расчёта стилей) и перед Paint (отрисовкой). По сути, это вычисление макета: браузер определяет точные размеры каждого элемента (ширину, высоту, координаты) и их взаимное расположение в документе.

Как работает процесс рендеринга и место Reflow в нём

Типичный конвейер рендеринга в браузере выглядит так:

1. Parsing HTML/CSS → построение DOM и CSSOM.
2. Style Calculation → определение итоговых стилей для каждого элемента (комбинация правил из CSSOM, таблиц стилей, инлайновых стилей).
3. Layout (Reflow) → расчёт геометрии: позиция, размеры.
4. Paint → создание записи о графических операциях (растеризация).
5. Composite → сборка слоёв для отображения на экране.

Reflow — это синхронный и вычислительно затратный процесс. Когда он запускается, браузер должен приостановить выполнение JavaScript и пересчитать геометрию для всех или части элементов в дереве рендеринга. Каждый раз, когда меняются геометрические свойства элемента или его положение в потоке документа, браузеру необходимо запустить reflow для этого элемента, его дочерних элементов, а часто и для соседних или родительских элементов.

// Пример: эти операции вызовут reflow
element.style.width = '100px';        // Изменение ширины
element.style.height = '50px';        // Изменение высоты
element.style.margin = '10px';        // Изменение внешнего отступа
element.style.padding = '5px';        // Изменение внутреннего отступа
element.style.display = 'none';       // Изменение типа отображения (удаление из потока)
element.style.fontSize = '16px';      // Изменение размера шрифта

Операции, вызывающие Reflow

• Изменение геометрических свойств CSS: width, height, padding, margin, border.
• Изменение позиционирования: position, top, left, float, display (например, с block на inline-block).
• Изменение содержимого: добавление, удаление или изменение текста внутри DOM-узлов.
• Изменение структуры DOM: добавление, удаление или перемещение узлов в дереве.
• Чтение геометрических свойств (т.н. "сильные" свойства): offsetWidth, offsetHeight, offsetTop, offsetLeft, scrollTop, scrollWidth, getComputedStyle(), getBoundingClientRect().
• Активация псевдоклассов: :hover, :focus.
• Изменение размеров окна браузера или шрифта.

Разница между Reflow и Repaint

Важно понимать разницу:

• Reflow (Перекомпоновка): Изменение геометрии элемента (размеры, положение). Всегда влечёт за собой последующий repaint.
• Repaint (Перерисовка): Визуальное обновление пикселей элемента (цвет, фон, тень, видимость) без изменения его макета. Менее затратен, но тоже не бесплатен.

// Пример: Это вызовет ТОЛЬКО repaint (если элемент не меняет размеры)
element.style.color = 'red';
element.style.backgroundColor = '#eee';
element.style.outline = '1px solid blue';

Оптимизация для минимизации Reflow

Частые и неконтролируемые reflow — основная причина "подвисания" интерфейса и низкого FPS. Стратегии оптимизации:

• Группировка чтения и записи: избегайте чередования операций, которые читают и записывают геометрические свойства. Браузер использует очередь, и каждое чтение может форсировать синхронный reflow для предоставления актуальных данных.

  // ПЛОХО: вызывает множественные reflow
  const el = document.getElementById('box');
  el.style.width = (el.offsetWidth + 10) + 'px'; // Чтение -> Reflow
  el.style.height = (el.offsetHeight + 10) + 'px'; // Чтение -> Reflow
  
  // ХОРОШО: минимизирует reflow
  const width = el.offsetWidth; // Чтение всех свойств
  const height = el.offsetHeight; // ...до любых записей
  el.style.width = (width + 10) + 'px'; // Запись всех свойств
  el.style.height = (height + 10) + 'px';
  

• Использование DocumentFragment или временного контейнера для массового добавления узлов в DOM.

• Временное удаление элемента из потока документа (с помощью display: none или позиционирования absolute/fixed) перед внесением множественных изменений.

• Предпочтение CSS-трансформаций (transform) и непрозрачности (opacity): эти свойства обрабатываются на этапе Composite, минуя и reflow, и repaint. Анимация transform: translateX(100px) будет в разы быстрее анимации left: 100px.

• Избегание табличной верстки: таблицы часто требуют нескольких проходов для определения макета.

• Использование will-change: transform для информирования браузера о предстоящих изменениях, что позволяет ему заранее выделить слой.

Практический вывод для разработчика

Понимание reflow — ключ к созданию производительных и отзывчивых веб-интерфейсов. Современные браузеры стали умнее и пытаются объединять reflow в пакеты, но "триггеры" в виде чтения геометрических свойств по-прежнему опасны. Профилирование в Performance Tab Chrome DevTools позволяет наглядно увидеть этапы Layout (reflow) и выявить проблемные места в коде. Оптимизация сводится к двум принципам: уменьшение области перекомпоновки (минимизация влияния на другие элементы) и сокращение частоты её запуска (группировка операций).