Как поддерживать производительность CSS-рендеринга (reflow vs repaint)?

Question

Accepted Answer

Браузер преобразует CSS-изменения в пиксели через конвейер, и разные изменения запускают разные (более или менее дорогостоящие) этапы:

```text
Style → Layout (reflow) → Paint → Composite
```

- **Layout / reflow** — пересчет геометрии (позиции/размеры). **Наиболее дорого** — изменение одного элемента может заставить пересчитать много других.
- **Paint / repaint** — заполнение пикселей (цвета, текст, тени). Дешевле, чем layout.
- **Composite** — объединение уже нарисованных слоев (GPU). **Самое дешевое**.

## Почему это важно

```css
/* ❌ trigger LAYOUT (reflow) — costly, recalculates geometry every frame */
width, height, top, left, margin, padding, font-size

/* ⚠️ trigger PAINT — repaint pixels */
color, background, box-shadow, border-radius

/* ✅ trigger only COMPOSITE — GPU, no layout/paint */
transform, opacity
```

Это единственное самое важное правило производительности: **анимируйте `transform` и `opacity`, а не `width`/`top`/`margin`.** Анимация свойств layout переполняет layout каждый кадр (jank); трансформации компилируются GPU (плавно 60fps).

```css
/* ❌ janky */ @keyframes a { to { left: 300px; width: 200px; } }
/* ✅ smooth */ @keyframes b { to { transform: translateX(300px) scaleX(2); } }
```

## Hint the browser with will-change (sparingly)

```css
.animated { will-change: transform; } /* promotes to its own GPU layer ahead of time */
```

Используйте `will-change` только на элементах, которые будут анимироваться — чрезмерное использование тратит память, создавая слишком много слоев.

## Избегайте layout thrashing в JS

```js
// ❌ read-write-read-write forces multiple synchronous reflows
for (const el of els) { el.style.width = el.offsetWidth + 10 + "px"; }
// ✅ batch reads, then writes
const widths = els.map(el => el.offsetWidth);
els.forEach((el, i) => el.style.width = widths[i] + 10 + "px");
```

## Другие выигрыши

```text
- contain: layout/paint — isolate a subtree so changes don't reflow the whole page
- content-visibility: auto — skip rendering offscreen content
- minimize deep selectors and huge unused stylesheets
```

## Почему это важно

Производительность рендеринга в основном заключается в *неповторном запуске layout*.

Знание того, что `transform`/`opacity` предназначены только для компилирования (дешево), а `width`/`top`/`margin` заставляют reflow (дорого) — плюс избежание layout thrashing и использование `contain`/`content-visibility` — это то, что держит анимации на 60fps и делает страницы быстрыми.