Перейти к содержимому
29 / 37

Что такое reflow и repaint и как минимизировать их количество?

Repaint — перерисовка элемента без изменения его геометрии (например, смена цвета). Reflow (layout) — пересчёт позиций и размеров элементов, который каскадно затрагивает соседей и потомков. Reflow всегда дороже repaint, потому что после пересчёта геометрии браузеру нужно ещё и перерисовать. Минимизируют их группировкой изменений DOM, использованием CSS-классов вместо поштучных стилей и выносом анимаций в transform/opacity.