Animaciones y rendimiento

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

Siempre que realices una animación, se deben mantener 60 fps, ya que una cantidad menor generará saltos o bloqueos que los usuarios noten y tendrán 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 la geometría de la página (diseño) o provocan pintura son particularmente costosas.
  • Siempre que puedas, limítate a realizar cambios en las transformaciones y opacidad.
  • Usa will-change para asegurarte de que el navegador sepa lo que deseas animar.

La animación de propiedades no es gratuita, y algunas propiedades son más económicas que otras. Por ejemplo, si animas las propiedades 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 reprocesamiento en navegadores basados en Gecko, como Firefox) y puede resultar costoso si la página tiene muchos elementos. Cuando se active un diseño, normalmente se deberá pintar la página o parte de ella, lo cual suele ser incluso más costoso que la operación de diseño.

Siempre que puedas, evita animar propiedades que activen el diseño o la pintura. En 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 se controla con JavaScript o CSS.

Lee una guía completa sobre cómo crear animaciones de alto rendimiento.

Cómo usar la propiedad will-change

Navegadores compatibles

  • 36
  • 79
  • 36
  • 9.1

Origen

Usa el will-change para asegurarte de que el navegador sepa que deseas 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 uses will-change en exceso, ya que esto puede hacer que el navegador desperdicie recursos, lo que, a su vez, genera incluso 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, es una buena idea tener will-change en los elementos animados. En la mayoría de los casos, entonces, cualquier elemento de la vista actual de tu app que quieras animar debe tener habilitado will-change para las propiedades que planeas cambiar. En el caso del ejemplo del cuadro que usamos 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 bien, 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 comentarios en la Web que analizan los méritos relativos de las animaciones de CSS y JavaScript desde una perspectiva de rendimiento. Estos son algunos puntos que debes tener en cuenta:

  • Las animaciones basadas en CSS, y las animaciones web cuando tengan compatibilidad nativa, generalmente se manejan en 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 está ejecutando algunas tareas costosas en el subproceso principal, estas animaciones pueden continuar sin interrumpirse.

  • En muchos casos, el subproceso compositor también puede administrar otros cambios en los parámetros de transformaciones y opacidad.

  • Si alguna animación activa la pintura, el diseño o ambos, se requerirá que el "subproceso principal" haga 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 sobrecarga de cualquier trabajo asociado con la ejecución de CSS o JavaScript, lo que hace que la pregunta sea discutible.