will-change y promoción de capas

will-change indica al navegador que un elemento se animará, lo que le permite preparar optimizaciones con antelación, como promover el elemento a su propia capa del compositor de la GPU antes de que comience la animación.

Especifique qué propiedad cambiará: will-change: transform, will-change: opacity, will-change: transform, opacity. Use will-change: auto para eliminar las indicaciones cuando termine la animación.

Aplique will-change únicamente a los elementos que realmente se animarán y solo durante la animación. Añadirlo y quitarlo con JavaScript (mediante una clase) es más eficiente que dejarlo aplicado permanentemente a elementos estáticos.

Cada capa promovida consume memoria de la GPU. Promover muchos elementos simultáneamente provoca presión de memoria, lo que puede degradar el rendimiento, especialmente en dispositivos móviles con una cantidad limitada de RAM de GPU. Promueva capas de forma selectiva y deliberada.

No aplique nunca will-change a * ni a un gran número de elementos. El coste de la optimización supera sus beneficios cuando se crean demasiadas capas. Haga primero un perfil de rendimiento y añada will-change únicamente cuando se haya confirmado un problema específico de jank.

Antes de will-change, los desarrolladores usaban transform: translateZ(0) o translate3d(0,0,0) para forzar la promoción a la GPU. will-change es el enfoque correcto y semántico. El truco de translateZ todavía funciona, pero es un detalle de implementación y no expresa la intención.

Las capas promovidas crean nuevos contextos de apilamiento. Esto afecta al comportamiento de z-index: los elementos hijos de un elemento promovido se apilan en relación con ese elemento, no con la raíz del documento. Tenga en cuenta los cambios en el contexto de apilamiento al promover elementos.

Añada will-change en mouseenter o al comenzar una animación, y elimínelo en mouseleave o al terminar la animación. Así el navegador dispone de tiempo para prepararse sin consumir permanentemente memoria de la GPU para elementos inactivos.

El panel Layers de Chrome DevTools permite visualizar las capas promovidas. Un número elevado de capas (cientos) indica una promoción excesiva. La sección Memory muestra el uso de memoria de la GPU. Mantenga al mínimo el número de capas promovidas y supervise este valor en perfiles de dispositivos de gama baja.

contain: layout paint de CSS restringe los cálculos de layout y paint a un subárbol, de forma similar al aislamiento. Mejora el rendimiento de widgets autónomos sin crear capas de GPU, por lo que es una optimización menos costosa que will-change para elementos no animados.

will-change es totalmente compatible con todos los navegadores modernos. Los navegadores lo tratan como una indicación, no como una orden, y pueden ignorarlo si los recursos son limitados. No dependa de ello como garantía; úselo únicamente como una sugerencia para orientar el rendimiento.

¿Cuál es el principal riesgo de aplicar will-change a muchos elementos simultáneamente?

will-change promueve los elementos a capas del compositor de la GPU antes de las animaciones, eliminando el coste de promoción al comenzar la animación. Aplíquelo de forma dinámica y selectiva, únicamente cuando el perfil de rendimiento muestre jank, para evitar un consumo excesivo de memoria de la GPU debido a una promoción excesiva.