Comment gardez-vous le rendu CSS performant (reflow vs repaint) ?

Question

Accepted Answer

Le navigateur transforme les modifications CSS en pixels à travers un pipeline, et différentes modifications déclenchent différentes étapes plus ou moins coûteuses :

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

- **Layout / reflow** — recalcul de la géométrie (positions/tailles). **Le plus coûteux** — changer un élément peut forcer le recalcul de nombreux autres.
- **Paint / repaint** — remplissage des pixels (couleurs, texte, ombres). Moins coûteux que le layout.
- **Composite** — combinaison de couches déjà peintes (GPU). **Le moins coûteux**.

## Quelles propriétés déclenchent quoi

```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
```

Ceci est la règle de performance la plus importante : **animer `transform` et `opacity`, pas `width`/`top`/`margin`.** Animer les propriétés de layout réexécute le layout à chaque frame (saccades) ; les transforms sont composités par le GPU (fluide 60fps).

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

## Indiquez au navigateur avec will-change (avec parcimonie)

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

Utilisez `will-change` uniquement sur les éléments sur le point d'être animés — en abuser gaspille la mémoire en créant trop de couches.

## Évitez le layout thrashing en 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");
```

## Autres gains

```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
```

## Pourquoi c'est important

La performance de rendu est principalement une question de *ne pas déclencher le layout à répétition*.

Savoir que `transform`/`opacity` sont composite-only (bon marché) tandis que `width`/`top`/`margin` forcent reflow (coûteux) — plus éviter le layout thrashing et utiliser `contain`/`content-visibility` — c'est ce qui maintient les animations à 60fps et les pages qui se sentent rapides.