Layout, paint y composite: el pipeline de renderizado

Después de crear el árbol de renderizado, el navegador ejecuta tres etapas: Layout (cálculo del tamaño y la posición de los elementos), Paint (relleno de píxeles con colores, texto e imágenes) y Composite (combinación de las capas pintadas y su visualización en pantalla).

Layout calcula la geometría —ancho, alto y posición x/y— de cada elemento. Cambiar propiedades que afectan a la geometría (width, margin, padding, font-size, position) activa el layout del elemento y, potencialmente, de todo su subárbol; es la etapa más costosa.

Paint rellena los píxeles de cada capa: fondos, bordes, texto y sombras. Cambiar color, background-color, visibility o border-radius activa un repintado sin volver a calcular el layout; es más barato que el layout, pero sigue siendo costoso si se repinta un área grande.

El compositor combina las capas mediante la GPU. Las propiedades CSS que solo afectan a la composición —transform y opacity— pueden animarse sin activar el layout ni el paint. La GPU las procesa a 60 fps con una participación mínima de la CPU.

csstriggers.com (actualmente, documentación del navegador) documenta qué propiedades CSS activan el layout, el paint o la composición en cada motor de navegador. Úselo para auditar las propiedades de animación. Prefiera transform y opacity para las propiedades animadas.

La saturación del layout ocurre cuando JavaScript alterna entre leer propiedades del layout (offsetWidth) y escribir propiedades de estilo en un bucle. Cada escritura invalida el layout y cada lectura fuerza un reflow síncrono. Agrupe todas las lecturas antes que todas las escrituras para evitar la saturación.

Solo transform y opacity se gestionan completamente mediante el compositor cuando el elemento está en su propia capa. Animar cualquier otra propiedad, incluso left/top, activa el layout o el paint en el hilo principal y puede causar tirones.

Los navegadores promocionan los elementos a su propia capa de GPU cuando tienen will-change: transform, una animación CSS sobre transform/opacity, una posición fija con elementos vecinos que usan composición o una transformación 3D. Cada capa usa memoria de la GPU; demasiadas capas provocan presión de memoria.

Una tormenta de repintado ocurre cuando una gran parte de la página se vuelve a pintar en cada frame. Use Chrome DevTools → Rendering → Paint flashing para identificar las áreas que se vuelven a pintar. Aísle los elementos que se animan con frecuencia en sus propias capas para limitar el área de repintado.

Registre un perfil de rendimiento en Chrome DevTools. El gráfico de llamas muestra los eventos Layout, Update Layer Tree, Paint y Composite. Las barras largas de layout o paint indican cuellos de botella. Procure que los tiempos de frame sean inferiores a 16 ms para mantener 60fps.

Anime con transform y opacity siempre que sea posible. Use clip-path en lugar de width/height para las animaciones de revelado; clip-path es compatible con el compositor en los navegadores modernos. Evite animar box-shadow; use opacity junto con un pseudo-elemento que tenga una sombra prerenderizada.

El pipeline de renderizado — Layout, Paint y Composite — determina el rendimiento de las animaciones. Layout es la operación más costosa, paint tiene un coste moderado y las propiedades que solo afectan a composite (transform, opacity) se gestionan mediante la GPU. Comprender qué operaciones se activan permite crear animaciones fluidas a 60fps sin provocar thrashing del layout ni tormentas de repintado.