Resumen: Chromium está actualizando sus capacidades de aceleración de hardware automáticamente para las animaciones SVG, las transformaciones basadas en porcentajes y, próximamente, las animaciones de colores de fondo y de rutas de recorte.
En lo que respecta al rendimiento de la animación web, es probable que aparezcan los términos "acelerada por hardware" y "acelerada por GPU". Pero ¿qué significan? Los estilos acelerados por hardware son aquellos que aprovechan la GPU (unidad de procesamiento gráfico) en lugar de la CPU (unidad central de procesamiento) para renderizar estilos visuales. Esto se debe a que la GPU puede renderizar cambios visuales en una página web más rápido que la CPU.
El uso de la GPU para descargar transiciones y animaciones con alto contenido gráfico significa elementos visuales más fluidos y menos bloqueos, ya que el subproceso principal no afecta estas animaciones. Si las retiras del subproceso principal, tus animaciones omiten la corteza de otras secuencias de comandos activas que se ejecutan en tu página, lo que ralentizaría tus imágenes y crearía bloqueos.
Cómo habilitar animaciones con aceleración de hardware
Las animaciones aceleradas por hardware se componen como capas y ayudan a los desarrolladores a lograr animaciones fluidas de 60 FPS (fotogramas por segundo) para mejorar el rendimiento de la renderización visual. Actualmente, existen algunas maneras de especificar y habilitar las animaciones y transiciones aceleradas por hardware en la Web:
- Usa las funciones
transformde CSS o realiza la transición de los valoresopacityofilter - Agrega la propiedad
will-changea tu elemento. - Crea un dibujo animado en un lienzo con
OffscreenCanvas - Cómo crear un dibujo en 3D con WebGL
opacity, filter y transform por ahora, background-color y clip-path pronto se unirán a la lista. ¿Qué más se acelera el hardware de forma predeterminada en Chromium? El proceso incluye algunos elementos, como las animaciones SVG, que los desarrolladores solicitan con mucho entusiasmo.
Animaciones SVG aceleradas por hardware
SVG es una gran adición para cualquier sitio web y ahora esas interacciones con SVG pueden tener un mejor rendimiento. A partir de Chromium 89, Chrome se unirá a Firefox para habilitar la aceleración de hardware de forma predeterminada en las animaciones SVG. ¿Qué debes hacer tú, el desarrollador? Nada, esto se aplicará automáticamente para las animaciones SVG en Chromium 89 y versiones posteriores.
Ejemplo
Observemos las diferencias entre una animación SVG con aceleración de hardware activada y sin ella. Los indicadores de carga son elementos de la IU de uso general, como este que se ve en facebook.com. Estos indicadores sugieren que el trabajo se está haciendo en el servidor mientras el usuario espera una respuesta. En el caso que se muestra aquí, la respuesta sería cargar resultados adicionales en la barra lateral.
Cuando abrimos Herramientas para desarrolladores, podemos comenzar a generar perfiles y ver realmente las diferencias entre una experiencia de animación acelerada por CPU y GPU.
Puedes ver que, a la izquierda (Chromium 87), se vuelve a procesar la imagen cada vez que se anima el ícono giratorio (que se repite de manera continua). A la derecha, no se muestra la acción de volver a renderizar (Chromium 89 y Firefox). Podemos probar esto en el panel de renderización de Herramientas para desarrolladores, cuando se activa la escritura en la memoria flash de Paint.
Si observas con más detalle el panel Rendimiento, puedes volver a ver este efecto y cómo influye en el rendimiento general de tu propiedad web. Evitas el tiempo de renderización y pintura por completo para la animación, lo que genera animaciones más fluidas y aplicaciones con mejor rendimiento. Si bien Facebook no enviará este cargador basado en SVG hasta que la compatibilidad del navegador con SVG acelerado por hardware sea mayor, permitiría más flexibilidad en términos de temas, requisitos de escalamiento y resolución, y facilitaría el mantenimiento.
Animaciones de porcentaje
El equipo de Interactions también ofrece compatibilidad con las animaciones de transformación porcentual en Chromium 89. Las animaciones basadas en porcentajes describen interacciones que incluyen movimientos basados en porcentajes. Por ejemplo, puedes aumentar la escala de un elemento en un 20% o deslizar un menú de barra lateral responsivo desde fuera de la pantalla con algo como translateX: -100%.
Estos tipos de animaciones de IU son relativamente comunes, pero en la actualidad no aprovechan la aceleración de hardware, ya que antes no podíamos crear esas animaciones. Los porcentajes en las transformaciones dependen del tamaño del cuadro (es decir, el diseño), pero ahora, siempre que el tamaño del diseño no cambie en cada fotograma, el navegador puede calcular previamente los valores de transformación absolutos y ejecutarlos como si el desarrollador hubiera proporcionado valores de píxeles. La buena noticia es que el equipo de Chromium está trabajando en esta función, y pronto, estos tipos de animaciones se componerán automáticamente y se acelerarán por hardware.
¿Qué viene después?
Estas animaciones actualizadas harán que el estilo web sea mucho más fluido. Y, como se mencionó antes, el equipo siempre está
buscando para que surjan las próximas necesidades de la Web. En este momento, estamos programados para convertir background-color y clip-path para usar automáticamente la aceleración de hardware en versiones futuras de Chromium.
background-color es una prioridad debido a su alto recuento de uso para transiciones y efectos, y clip-path permite efectos de transición de mucho mejor rendimiento en la Web. Cuando el rendimiento se combina con la
interactividad, todos ganan.
Imagen de portada: Siora Photography para Unsplash