Las animaciones deben tener un buen rendimiento; de lo contrario, tendrán un impacto negativo en la experiencia del usuario.
Mantenga 60 FPS cada vez que esté realizando una animación, ya que si la cantidad es menor, se producen saltos o bloqueos que los usuarios notarán 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 cambian la geometría de la página (diseño) o generan efectos de pintura resulta particularmente costosa.
- Siempre que puedas, limítate a cambiar las transformaciones y opacidad.
- Usa
will-changepara asegurarte de que el navegador sepa lo que quieres animar.
La animación de propiedades no es gratuita, y algunas propiedades son más económicas que 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 reprocesamiento en los navegadores basados en Gecko, como Firefox) y puede resultar costoso si tu página tiene muchos elementos. Cada vez que 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 en sí.
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 la guía completa sobre cómo crear animaciones de alto rendimiento.
Cómo usar la propiedad will-change
Usa will-change para asegurarte de que el navegador sepa que deseas cambiar 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 en exceso, ya que puede hacer 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 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 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 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 hilos de comentarios en la web que analizan las ventajas relativas de las animaciones de CSS y JavaScript desde una perspectiva de rendimiento. A continuación, le presentamos algunos puntos que debe tener en cuenta:
Las animaciones basadas en CSS, y las animaciones web cuando sean compatibles de forma 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 está ejecutando algunas tareas costosas en el subproceso principal, estas animaciones pueden continuar sin interrumpirse.
En muchos casos, también puede manejar el subproceso compositor otros cambios en los valores de transform y Deployment.
Si alguna animación activa elementos de pintura, diseño o ambos, el "subproceso principal" deberá realizar 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 el trabajo asociado con la ejecución de CSS o JavaScript, lo que hace que la pregunta sea irrelevante.