Какие свойства вызывают reflow

Reflow (перерасчёт макета) происходит при изменении свойств, влияющих на геометрию элементов. Основные триггеры:

• Ширина/высота: width, height, padding, border
• Позиционирование: top, left, right, bottom
• Отступы: margin
• Шрифты: font-size, font-family, line-height
• Размеры окна: window.resize
• DOM-операции: добавление/удаление узлов

Пример:

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

// Не вызовет reflow (только repaint)
element.style.color = 'red';
element.style.backgroundColor = '#fff';

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

• Используйте transform и opacity для анимаций
• Группируйте изменения через requestAnimationFrame
• Применяйте display: none перед массовыми изменениями