Animaciones y rendimiento

Las animaciones deben tener un buen rendimiento; de lo contrario, afectarán negativamente la experiencia del usuario.

Sam Thorogood

Mantén 60 fps cada vez que crees animaciones, ya que cualquier valor inferior provocará interrupciones o bloqueos que los usuarios notarán y que afectarán negativamente su experiencia.

  • Asegúrate de que tus animaciones no causen problemas de rendimiento. Asegúrate de conocer el impacto de animar una propiedad CSS determinada.
  • Las animaciones de propiedades que cambian la geometría de la página (diseño) o causan pintura son particularmente costosas.
  • Cuando sea posible, cambia las transformaciones y la opacidad.
  • Usa will-change para asegurarte de que el navegador sepa qué planeas animar.

Animar propiedades no es gratis, y algunas propiedades son más económicas que otras. Por ejemplo, animar los 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 reabastecimiento en navegadores basados en Gecko, como Firefox) y puede ser costoso si tu página tiene muchos elementos. Cada vez que se activa el diseño, por lo general, se debe pintar la página o parte de ella, lo que suele ser incluso más costoso que la operación de diseño en sí.

Siempre que sea posible, evita animar propiedades que activen el diseño o la pintura. Para la mayoría de los navegadores modernos, esto significa limitar las animaciones a opacity o transform, que el navegador puede optimizar en gran medida. No importa si la animación está controlada por JavaScript o CSS.

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

Usa la propiedad will-change

Browser Support

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

Source

Usa will-change para asegurarte de que el navegador sepa que quieres cambiar la propiedad de un elemento. Esto permite que el navegador aplique las optimizaciones más adecuadas antes de que realices el cambio. Sin embargo, no abuses de will-change, ya que hacerlo puede provocar que el navegador desperdicie recursos, lo que, a su vez, causa aún más problemas de rendimiento.

La regla general es que, si la animación puede activarse en los próximos 200 ms, ya sea por la interacción de un usuario o por el estado de tu aplicación, es una buena idea tener will-change en los elementos de animación. En la mayoría de los casos, cualquier elemento de la vista actual de tu app que quieras animar debe tener will-change habilitado para las propiedades que planeas cambiar. En el caso del ejemplo de cuadro que hemos estado usando en las guías anteriores, agregar will-change para las transformaciones y la opacidad se ve de la siguiente manera:

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

Ahora, los navegadores que lo admiten, actualmente la mayoría de los navegadores modernos, realizarán las optimizaciones adecuadas para admitir el cambio o la animación de esas propiedades.

Rendimiento de CSS en comparación con JavaScript

Hay muchas páginas y conversaciones de comentarios en la Web que analizan los méritos relativos de las animaciones de CSS y JavaScript desde una perspectiva de rendimiento. Ten en cuenta lo siguiente:

  • Por lo general, las animaciones basadas en CSS y las animaciones web, cuando son compatibles de forma nativa, se controlan en un subproceso conocido como "subproceso del compositor". Esto es diferente del "subproceso principal" del navegador, en el que se ejecutan el diseño, el estilo, la pintura y JavaScript. Esto significa que, si el navegador ejecuta algunas tareas costosas en el subproceso principal, estas animaciones pueden continuar sin interrupciones.

  • En muchos casos, el subproceso del compositor también puede controlar otros cambios en las transformaciones y la opacidad.

  • Si alguna animación activa la pintura, el diseño o ambos, el "subproceso principal" deberá realizar el trabajo. Esto es cierto para las animaciones basadas en CSS y JavaScript, y es probable que la sobrecarga del diseño o la pintura eclipse cualquier trabajo asociado con la ejecución de CSS o JavaScript, lo que hace que la pregunta sea irrelevante.