Что тяжелее для производительности: Reflow или Repaint

«Что тяжелее для производительности: Reflow или Repaint» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Reflow (или Layout) тяжелее, чем Repaint, потому что включает в себя пересчет геометрии элементов (размеры, позиции), что вызывает каскадные изменения в DOM. Repaint же только перерисовывает пиксели без изменения структуры.

Пример:

// Вызовет reflow (изменение ширины) + repaint
element.style.width = '100px';

// Вызовет только repaint (изменение цвета)
element.style.color = 'red';

Оптимизация: минимизируйте reflow, группируя изменения DOM или используя requestAnimationFrame.