Какие CSS-свойства вызывают только Repaint, а какие — Reflow/Layout?

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

Когда браузер отрисовывает страницу, он проходит несколько этапов: построение DOM, CSSOM, дерева рендеринга, расчёт геометрии (Layout/Reflow) и отрисовка пикселей (Paint/Repaint). Некоторые CSS-свойства затрагивают только внешний вид элемента, не меняя его размеры или положение — они вызывают только Repaint. Другие изменяют геометрию, что приводит к пересчёту Layout (Reflow) и последующему Repaint.

Свойства, вызывающие только Repaint

• color
• background-color, background-image (без изменения размеров)
• visibility
• outline (без изменения размеров)
• box-shadow (без размытия, влияющего на размер)
• text-decoration
• border-color

Свойства, вызывающие Reflow (Layout)

• width, height
• margin, padding
• border-width
• position (top, left, right, bottom)
• display (none/block и т.д.)
• font-size, font-family
• line-height
• overflow
• float, clear

Пример кода

// Вызывает только Repaint
element.style.color = 'red';
element.style.backgroundColor = 'blue';

// Вызывает Reflow + Repaint
element.style.width = '200px';
element.style.height = '100px';
element.style.margin = '10px';

Практическое применение

Для оптимизации производительности анимаций и частых изменений стилей (например, в играх или drag-and-drop) следует избегать свойств, вызывающих Reflow. Используйте transform и opacity — они обрабатываются на уровне композиции и не вызывают ни Reflow, ни Repaint.

Вывод: Знание этой разницы помогает писать быстрые интерфейсы, особенно при работе с анимациями и динамическими изменениями DOM. Для максимальной производительности отдавайте предпочтение transform и opacity.