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

Изменение CSS свойств может затронуть разные этапы рендеринга в зависимости от типа изменяемого свойства:

1. Layout (reflow) - пересчёт геометрии (ширина, высота, позиция). Вызывается при изменении:
   • ширины/высоты (width, height)
   • отступов (margin, padding)
   • позиционирования (position, top, left)

2. Paint - перерисовка пикселей. Вызывается при изменении:

   • цвета (color, background-color)
   • теней (box-shadow, text-shadow)
   • видимости (visibility, opacity)

3. Composite - композиция слоёв. Вызывается при изменении:

   • трансформаций (transform, opacity)
   • фильтров (filter)

Пример оптимизации:

/* Вызывает только composite */
.element {
  will-change: transform; /* Подсказка браузеру */
  transform: translateX(10px);
}

Для производительности лучше изменять свойства, которые вызывают только composite (transform, opacity).