Что такое reflow

Reflow (или layout) — это процесс пересчета геометрии элементов на странице, когда браузер заново вычисляет их размеры и положение. Происходит при изменении свойств, влияющих на макет (width, height, margin, padding, display и т.д.).

Пример:

// Вызовет reflow
element.style.width = '200px';

Когда происходит:

• Изменение DOM (добавление/удаление элементов)
• Изменение стилей, влияющих на макет
• Изменение размеров окна
• Получение метрик элементов (offsetWidth, scrollTop и т.д.)

Оптимизация:

• Группировать изменения DOM (DocumentFragment)
• Использовать transform и opacity (не вызывают reflow)
• Избегать частых чтений метрик (читать всё сразу, затем изменять)