Объясни, будет ли вызван Reflow при изменении размера элемента: от чего это зависит и почему.

Reflow при изменении размера элемента произойдёт почти всегда, потому что изменение геометрии требует пересчёта расположения элементов. Но есть нюансы.

Когда reflow произойдёт

Изменение свойств, влияющих на геометрию (размеры, позиции), вызывает reflow:

element.style.width = '200px';   // reflow — меняется размер
element.style.height = '100px';  // reflow
element.style.padding = '10px';  // reflow

Reflow пересчитывает layout элемента и часто его родителей/потомков, за ним следует repaint.

От чего зависит

Влияет ли изменение на layout

• width, height, margin, padding, top → reflow.
• color, background → только repaint (без reflow).
• transform, opacity → только composite (без reflow и repaint)!

Поэтому анимации размера через transform: scale() не вызывают reflow, а через width — вызывают.

Область влияния

Reflow может быть локальным (один элемент) или каскадным (затрагивает всё дерево) — зависит от того, влияет ли изменение на соседей.

Оптимизация

• Анимировать через transform/opacity вместо width/height.
• Группировать изменения DOM.
• Избегать чтения offsetWidth между записями (принудительный синхронный reflow).

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

Изменение размера (width/height) вызывает reflow — пересчёт геометрии, часто каскадный. Зависит от того, влияет ли свойство на layout: width → reflow, color → только repaint, transform/opacity → только composite (без reflow). Поэтому анимируют через transform, а не width.