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

Reflow вызывают свойства, влияющие на геометрию: размеры (`width`, `height`), отступы (`margin`, `padding`), позиционирование (`top`, `left`), `display`, `font-size`, а также чтение геометрии (`offsetHeight`).

Свойства, вызывающие reflow

Размеры

width, height, min/max-width/height, border, padding, margin — меняют размер элемента → пересчёт layout.

Позиционирование

top, left, right, bottom, position — меняют расположение.

Отображение и поток

display, float, clear, overflow — меняют участие в потоке.

Текст и шрифты

font-size, font-family, line-height, text-align, white-space — влияют на размеры текста.

Структура DOM

• Добавление/удаление элементов.
• Изменение содержимого, влияющего на размеры.
• Изменение размера окна, шрифтов.

Чтение геометрии (принудительный reflow!)

Чтение этих свойств вынуждает синхронный reflow:

element.offsetHeight;
element.offsetWidth;
element.getBoundingClientRect();
element.scrollTop;
getComputedStyle(element);

Что НЕ вызывает reflow

• color, background, box-shadow, visibility → только repaint.
• transform, opacity → только composite (ни reflow, ни repaint)! Поэтому их используют для анимаций.

Как минимизировать

• Анимировать transform/opacity.
• Группировать чтения и записи DOM (избегать layout thrashing).
• Менять классы, а не отдельные стили.

Коротко для собеседования

Reflow вызывают свойства геометрии: размеры (width/height/margin/padding/border), позиция (top/left/position), display/float/overflow, шрифты (font-size/line-height), изменение DOM. Плюс чтение геометрии (offsetHeight, getBoundingClientRect) — принудительный reflow. Не вызывают: color/background (repaint), transform/opacity (composite — для анимаций).