Capas de composición: qué son, qué cuestan y cuándo promocionar

La última etapa del pipeline trabaja con capas: superficies rasterizadas de forma independiente que la GPU puede mover, escalar y mezclar sin repintar nada. Promocionar un elemento a capa propia es lo que convierte una animación cara en una gratis, y es también la optimización que más veces he visto aplicada de forma indiscriminada hasta convertirse en el problema que pretendía resolver. La memoria de vídeo es finita y cada capa se la come.

Qué es una capa y por qué existe

Una capa de composición es una superficie rasterizada por separado: su propio mapa de bits, con su propia textura en la GPU. El compositor tiene una lista de capas con una transformación y una opacidad cada una, y produce el fotograma dibujándolas en orden.

La ventaja aparece cuando algo cambia. Si el elemento que se mueve tiene su propia capa, mover la capa es actualizar una matriz de cuatro por cuatro y volver a dibujar: no hay que repintar ni rasterizar nada. Si no la tiene, forma parte de la textura de otra capa, y moverlo obliga a regenerar esa textura entera.

Los motivos por los que un elemento acaba con capa propia, ordenados de más explícito a más sorprendente:

Lo has pedido. will-change: transform, will-change: opacity o will-change: filter. Es la forma declarativa y moderna de pedirlo.

Tiene una transformación tridimensional. transform: translateZ(0) o transform: translate3d(0,0,0). Es el truco antiguo, anterior a will-change, y sigue funcionando por compatibilidad. No lo uses en código nuevo: dice lo que quieres conseguir en lugar de por qué.

Tiene una animación gestionada por el motor sobre una propiedad compuesta. Una transición o una animación de CSS, o una animación de la API web, sobre transform u opacity. El motor promociona mientras dura y despromociona al terminar, que es el comportamiento ideal.

Es un elemento que se rasteriza aparte por naturaleza. Un vídeo, un lienzo con contexto tridimensional, un iframe compuesto aparte.

Tiene un filtro de fondo. backdrop-filter obliga a componer, porque necesita leer lo que hay debajo.

Está por encima de una capa. Y este es el que produce sorpresas: si un elemento se pinta encima de otro que ya tiene capa propia, el motor tiene que decidir cómo respetar el orden de pintado. La solución habitual es promocionarlo también. Se llama composición implícita, y es el mecanismo detrás de la mayoría de las explosiones de capas.

Cuánto cuesta una capa

La cuenta es directa: anchura por altura por cuatro bytes, en píxeles de dispositivo. Y “en píxeles de dispositivo” es la parte que se olvida, porque en un móvil moderno la densidad es de dos o tres, y la memoria escala con el cuadrado.

Un panel a pantalla completa promocionado en un móvil de densidad tres cuesta once megabytes de memoria de vídeo. Treinta tarjetas de 300 por 200 promocionadas en el mismo dispositivo cuestan sesenta.

Cuando la memoria de vídeo disponible se agota, el navegador no falla con un error: degrada. Deja de promocionar, cae a rasterizado por software en algunos casos, o descarta y regenera texturas continuamente. El síntoma es una página que va bien un rato y después empieza a dar tirones sin razón aparente, y es especialmente difícil de diagnosticar porque el perfil del hilo principal está limpio.

Además del coste de memoria hay un coste por fotograma: el compositor tiene que recorrer y dibujar todas las capas en cada fotograma. Con diez capas, eso es una fracción de milisegundo. Con doscientas, se convierte en varios milisegundos y en un consumo de energía notable. Más capas no es mejor; hay un óptimo y está bajo.

La inspección se hace en el panel de capas de las herramientas de desarrollo, que lista cada capa con su tamaño, su consumo de memoria estimado y el motivo por el que existe. Esa última columna es la que resuelve las explosiones, porque distingue las capas que pediste de las que aparecieron solas.

Y la superposición de bordes de capa, en el panel de renderizado, dibuja el contorno de cada una sobre la página. Es la forma más rápida de ver de un vistazo si tienes cinco capas o ciento cincuenta.

will-change y su ciclo de vida

will-change es una promesa al navegador: “esta propiedad va a cambiar, prepárate”. El navegador la cumple reservando la capa desde el momento en que la declaración se aplica y mientras siga aplicándose.

De ahí sale la regla que se incumple casi siempre: will-change en una hoja de estilos, sobre un selector que empareja con muchos elementos, es memoria reservada permanentemente para animaciones que quizá nunca ocurran.

/* MAL: cincuenta tarjetas con capa propia desde que carga la pagina */
.tarjeta {
  will-change: transform;
}

El ciclo de vida correcto es puntual: se pone justo antes de la animación y se quita al terminar.

function abrirPanel(panel) {
  panel.style.willChange = 'transform, opacity';

  const animacion = panel.animate(
    [
      { transform: 'translateY(16px)', opacity: 0 },
      { transform: 'translateY(0)', opacity: 1 },
    ],
    { duration: 200, easing: 'ease-out', fill: 'forwards' },
  );

  animacion.finished.finally(() => {
    panel.style.willChange = '';      // devolver la memoria
  });
}

Y para el caso declarativo, hay una forma de acotarlo con CSS que funciona bien: aplicar will-change solo mientras el elemento está en un estado que anuncia la animación inminente.

.tarjeta { transition: transform 180ms ease-out; }

/* La capa se reserva al acercarse el puntero, no antes */
.lista:hover .tarjeta,
.lista:focus-within .tarjeta {
  will-change: transform;
}

Con eso la memoria se reserva unos milisegundos antes de que haga falta y se libera cuando el puntero se va, que es exactamente el comportamiento que la propiedad fue diseñada para tener.

Un aviso que la especificación hace explícitamente y que conviene repetir: will-change no es un acelerador. Aplicarlo a un elemento que no va a cambiar no lo hace más rápido; lo hace más caro. Y aplicarlo a una propiedad que no es compuesta no consigue nada, porque la promoción a capa no evita el layout.

.cabecera-fija {
  position: fixed;
  z-index: 10;          /* que se pinte la ultima: nada se solapa por encima */
  will-change: transform;
}

El resumen operativo

Promociona cuando un elemento se va a animar con propiedades compuestas de forma sostenida, y lo has medido.

No promociones cuando el elemento no se anima, cuando la animación es de una propiedad que provoca layout, o cuando el selector empareja con más de un puñado de elementos.

Quita la promoción en cuanto la animación termina, con la promesa de la animación o con una clase que se retira.

Vigila el recuento total. Como cifra orientativa, por debajo de veinte capas no hay conversación que tener; por encima de cien en un móvil, hay un problema aunque todavía no se note.