Если в процессе рендеринга поменять CSS свойства, какие этапы рендеринга будут перезапущены?

Какие этапы перезапустятся, зависит от того, какое свойство изменили: браузер повторяет только нужную часть цепочки Style → Layout → Paint → Composite.

Три случая

• Геометрия (width, height, margin, top, font-size, display) → пересчёт стилей, layout, paint и composite. Самый дорогой вариант, может затронуть соседей и родителей.
• Только внешний вид (color, background, box-shadow, visibility) → стили, paint и composite, без раскладки.
• Композиция (transform, opacity, при выделенном слое) → только composite, на GPU. Самое дешёвое.

/* дорого — layout на каждом кадре */
.box { transition: left .3s; }
/* дёшево — только композиция */
.box { transition: transform .3s; }

Принудительный reflow

Чтение offsetHeight или getBoundingClientRect() сразу после изменения стилей заставляет браузер синхронно выполнить layout. Лучше сначала прочитать все значения, потом всё записать.

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

Изменение геометрии запускает layout, paint и composite; изменение цвета — paint и composite; transform и opacity — только composite.

Подробнее: web.dev — Rendering performance