Los navegadores modernos pueden animar dos propiedades de CSS de forma económica: transform y opacity.
Si animas otro elemento, es probable que no alcances un rango de 60 fotogramas por segundo (FPS) con fluidez.
En esta publicación, se explica por qué ocurre esto.
Rendimiento de la animación y velocidad de fotogramas
Se acepta que una velocidad de fotogramas de 60 FPS es el objetivo cuando se anima cualquier elemento en la Web. Esta velocidad de fotogramas garantizará que tus animaciones se vean fluidas. En la Web, un fotograma es el tiempo que lleva realizar todo el trabajo necesario para actualizar y volver a pintar la pantalla. Si cada fotograma no se completa en 16.7 ms (1000 ms / 60 propiedades 16.7), los usuarios percibirán el retraso.
La canalización de renderización
Para mostrar algo en una página web, el navegador debe seguir estos pasos secuenciales:
- Estilo: Calcula los estilos que se aplican a los elementos.
- Diseño: Genera la geometría y la posición de cada elemento.
- Pintura: Completa los píxeles de cada elemento en capas.
- Compuesto: Dibuja las capas en la pantalla.
Estos cuatro pasos se conocen como la canalización de renderización del navegador.
Cuando animas algo en una página que ya cargó, estos pasos deben volver a ocurrir. Este proceso comienza en el paso que se debe cambiar para permitir que se lleve a cabo la animación.
Como se mencionó antes, estos pasos son secuenciales. Por ejemplo, si animas algo que cambia de diseño, los pasos de pintura y composición también deberán volver a ejecutarse. Por lo tanto, animar un elemento que cambia el diseño es más costoso que animar algo que solo cambia la composición.
Cómo animar propiedades de diseño
Los cambios de diseño implican calcular la geometría (posición y tamaño) de todos los elementos afectados por el cambio.
Si cambias un elemento, es posible que debas volver a calcular su geometría.
Por ejemplo, si cambias el ancho del elemento <html>, es posible que se vea afectado cualquiera de sus elementos secundarios.
Debido a la forma en que los elementos se desbordan y se afectan entre sí, los cambios que se producen más abajo en el árbol a veces pueden generar cálculos de diseño hasta la parte superior.
Cuanto más grande sea el árbol de elementos visibles, más tiempo llevará realizar cálculos de diseño.
Cómo animar las propiedades de la pintura
La pintura es el proceso de determinar en qué orden se deben pintar los elementos en la pantalla. A menudo, es la tarea de la canalización que se ejecuta por más tiempo.
La mayor parte del proceso de pintura en los navegadores modernos se realiza en rasterizadores de software. Según cómo se agrupen los elementos de tu app en capas, es posible que también se deban pintar otros elementos además del que cambiaron.
Cómo animar propiedades compuestas
La composición es el proceso de separar la página en capas, convertir la información sobre cómo debe verse la página en píxeles (rasterización) y juntar las capas para crear una página (composición).
Es por eso que la propiedad opacity se incluye en la lista de elementos cuya animación es económica.
Siempre que esta propiedad esté en su propia capa, la GPU puede controlar los cambios durante el paso de composición.
Los navegadores basados en Chromium y WebKit crean una capa nueva para cualquier elemento que tenga una animación o transición de CSS en opacity.
¿Qué es una capa?
Al colocar los elementos que se animarán o pasarán a una nueva capa, el navegador solo deberá volver a pintar esos elementos y no todo lo demás. Es posible que estés familiarizado con el concepto de Photoshop de una capa que contiene un montón de elementos que se pueden mover juntos. Las capas de renderización del navegador son similares a esa idea.
Si bien el navegador hace un buen trabajo al tomar decisiones sobre los elementos que deben aparecer en una capa nueva, si pasa por alto una, existen formas de forzar su creación. Puedes obtener información al respecto en Cómo crear animaciones de alto rendimiento. Sin embargo, la creación de capas nuevas se debe hacer con cuidado porque cada una utiliza memoria. En los dispositivos con memoria limitada, crear capas nuevas puede ser un problema de rendimiento mayor que el que intentas resolver. Además, las texturas de cada capa deben subirse a la GPU. Por lo tanto, es posible que alcances restricciones de ancho de banda entre la CPU y la GPU.
Rendimiento de CSS en comparación con JavaScript
Quizás te preguntes si, desde una perspectiva de rendimiento, es mejor usar CSS o JavaScript para las animaciones.
Las animaciones basadas en CSS y las animaciones web (en los navegadores que admiten la API), por lo general, se controlan en un subproceso conocido como subproceso compositor. Es diferente del subproceso principal del navegador, en el que 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.
Como se explica en este artículo, en muchos casos, el subproceso compositor también puede controlar otros cambios en las propiedades transformaciones y opacidad.
Si alguna animación activa la pintura, el diseño o ambos, se requerirá que el subproceso principal realice el trabajo. Esto se aplica a las animaciones de 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, por lo que la pregunta no es tan costosa.