intermediate

Repaints и reflows

Понимайте работу style, layout, paint и compositing при изменении размера, позиции, цвета, теней или transforms.

Pipeline рендеринга превращает DOM и CSS в пиксели: пересчёт style, layout (reflow), paint и compositing. Разные изменения свойств запускают разные фазы.

| Примеры изменений | Типичная работа | |-------------------|-----------------| | `width`, `font-size`, `display` | style + layout + paint (+ composite) | | `color`, `box-shadow` | style + paint (+ composite) | | `transform`, `opacity` | style + composite (часто) |

					.promoted {
  will-change: transform; /* только hint — умеренно */
  transform: translateZ(0);
}

Продвижение слоёв помогает анимации, но увеличивает память. Профилируйте в Performance и Rendering до микрооптимизаций.

На интервью: различайте стоимость layout, paint и composite — не каждая анимация одинаково дорога.

Компромисс: продвижение слоёв для плавной анимации против роста потребления памяти.

Типовые ошибки: will-change везде; вера что GPU-слои всегда быстрее; оптимизация без данных профилирования.

Чеклист:

Какую фазу запускает ваше изменение.
Compositor-friendly свойства для motion.
Профилируйте до поиска bottleneck.
Память при избыточном layer promotion.