Animaciones y rendimiento

Las animaciones deben funcionar correctamente; de lo contrario, tendrán un impacto negativo en la experiencia del usuario.

Sam Thorogood

Cada vez que se hace una animación, se deben mantener 60 fps, ya que un número menor daría como resultado parpadeos o bloqueos que los usuarios podrían notar, y esto tendría un impacto negativo en sus experiencias.

  • Asegúrate de que tus animaciones no causen problemas de rendimiento. Asegúrate de conocer el impacto de animar una determinada propiedad de CSS.
  • La animación de propiedades que modifican las características geométricas de la página (diseño) o generan efectos de pintura implican un consumo de recursos particularmente alto.
  • Siempre que puedas, limítate a realizar cambios en las transformaciones y opacidad.
  • Usa will-change para asegurarte de que el navegador reconozca lo que deseas animar.

La animación de propiedades tiene consecuencias, y para algunas propiedades supone un menor consumo de recursos que para otras. Por ejemplo, animar los elementos width y height de un elemento cambia su geometría y puede hacer que otros elementos de la página se muevan o cambien de tamaño. Este proceso se denomina diseño (o reflujo en navegadores basados en Gecko, como Firefox) y puede consumir muchos recursos si tu página contiene muchos elementos. Cada vez que se genera un diseño, normalmente se deberá pintar la página o parte de ella, lo cual suele requerir aún más recursos que la operación de diseño.

Siempre que sea posible, debes evitar animar propiedades que activen diseño o pintura. Para la mayoría de los navegadores actualizados, esto significa limitar las animaciones a opacity o transform, ya que el navegador puede optimizar ambas funciones en gran medida, independientemente de si la animación se controla con JavaScript o CSS.

Lee una guía completa para crear animaciones de alto rendimiento.

Usa la propiedad will-change

Navegadores compatibles

  • Chrome: 36.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 9.1.

Origen

Usa will-change para asegurarte de que el navegador reconozca que deseas modificar la propiedad de un elemento. De este modo, el navegador puede aplicar las optimizaciones más adecuadas antes de que realices el cambio. Sin embargo, no uses will-change demasiado, ya que esto podría hacer que el navegador desperdicie recursos, y esto también causa más problemas de rendimiento.

La regla general es que, si la animación se puede activar en los próximos 200 ms, ya sea por la interacción de un usuario o debido al estado de tu aplicación, se recomienda tener will-change en los elementos animados. En la mayoría de los casos, entonces, cualquier elemento de la vista actual de tu aplicación que desees animar debe tener will-change habilitada para las propiedades que vayas a modificar. En el caso del ejemplo del cuadro que usamos en las guías anteriores, agregar will-change para los atributos transformaciones y opacidad se verá de la siguiente manera:

.box {
  will-change: transform, opacity;
}

Ahora, los navegadores compatibles, la mayoría de los navegadores actuales, realizarán las optimizaciones adecuadas de forma interna para admitir el cambio o la animación de esas propiedades.

Rendimiento de CSS en comparación con JavaScript

Existen muchas páginas y conversaciones de comentarios en la Web en los que se analizan los méritos relativos de las animaciones de CSS y JavaScript desde la perspectiva del rendimiento. A continuación, le presentamos algunos puntos que debe tener en cuenta:

  • Las animaciones basadas en CSS, y las animaciones web cuando exista compatibilidad nativa, generalmente se manejan con un subproceso conocido como “subproceso compositor”. Es diferente del "subproceso principal" del navegador, donde se ejecutan el estilo, el diseño, la pintura y JavaScript. Esto significa que, si el navegador tiene en ejecución algunas tareas costosas en el subproceso principal, es muy probable que las animaciones se sigan ejecutando sin interrupciones.

  • En muchos casos, el subproceso compositor también puede administrar otras modificaciones de las propiedades transforms y opacity.

  • Si alguna animación activa elementos de pintura, diseño o de ambas clases, el “subproceso principal” deberá hacer el trabajo. Esto es así para las animaciones basadas en CSS y JavaScript, y es probable que la sobrecarga de diseño o pintura reduzca la cantidad de trabajo asociado con la ejecución de CSS o JavaScript, lo que hace que la pregunta sea irrelevante.