¿Cómo se mantiene el CSS rendering eficiente (reflow vs repaint)?

Question

Accepted Answer

El navegador convierte cambios CSS en píxeles a través de un pipeline, y diferentes cambios activan diferentes (más o menos costosos) pasos:

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

- **Layout / reflow** — recalcular geometría (posiciones/tamaños). **Más costoso** — cambiar un elemento puede forzar recalcular muchos otros.
- **Paint / repaint** — llenar píxeles (colores, texto, sombras). Más barato que layout.
- **Composite** — combinar capas ya pintadas (GPU). **Más barato**.

## Qué propiedades activan qué

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

Esta es la regla de rendimiento más importante: **animar `transform` y `opacity`, no `width`/`top`/`margin`.** Animar propiedades de layout vuelve a ejecutar layout en cada fotograma (jank); los transforms se componen con GPU (suave 60fps).

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

## Sugerencia al navegador con will-change (con moderación)

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

Usa `will-change` solo en elementos que estén a punto de animar — el uso excesivo desperdicia memoria al crear demasiadas capas.

## Evita 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");
```

## Otros beneficios

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

## Por qué es importante

El rendimiento de rendering se trata principalmente de *no activar layout repetidamente*.

Saber que `transform`/`opacity` son solo composit (baratos) mientras que `width`/`top`/`margin` fuerzan reflow (caros) — además de evitar layout thrashing y usar `contain`/`content-visibility` — es lo que mantiene las animaciones a 60fps y hace que las páginas se sientan rápidas.