Resumen: Chromium está actualizando automáticamente sus capacidades de aceleración de hardware para animaciones SVG, transformaciones basadas en porcentajes y, próximamente, las animaciones de color de fondo y rutas de recorte.
Cuando se trata del rendimiento de las animaciones 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 uso intensivo de gráficos permite obtener imágenes más fluidas y menos bloqueos, ya que el subproceso principal no afecta estas animaciones. Si las quitas del subproceso principal, las animaciones omiten la superficie de otras secuencias de comandos activas que se ejecutan en tu página, lo que ralentizaría tus imágenes y generarí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 transiciones y las animaciones 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 sobre un lienzo a través de
OffscreenCanvas - Crear un dibujo 3D con WebGL
opacity, filter y transform por el momento, background-color y clip-path pronto se unirán a la lista. ¿Qué más se está acelerando por hardware de forma predeterminada en Chromium? Próximamente, incorporaremos algunos elementos, incluidas las animaciones SVG, algo que los desarrolladores solicitaron con entusiasmo.
Animaciones SVG aceleradas por hardware
SVG es un gran aporte 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é tienes que hacer como desarrollador? Nada; esto se aplicará automáticamente a las animaciones SVG en Chromium 89 y versiones posteriores.
Ejemplo
Veamos las diferencias entre una animación SVG con y sin la aceleración de hardware activada. 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 realiza 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 CPU y animación acelerada por GPU.
Como puedes ver, a la izquierda (Chromium 87), se vuelve a procesar el dibujo cada vez que se anima el ícono giratorio (lo cual es continuamente). A la derecha, no está permitido volver a procesar (Chromium 89 y Firefox). Podemos probar esto en el panel de renderización de Herramientas para desarrolladores, cuando se activa Paint de manera intermitente.
Si observas el panel Rendimiento con más detalle, puedes volver a ver este efecto y cómo afecta el rendimiento general de tu propiedad web. Evitas el tiempo de renderización y pintura por completo para la animación, es decir, 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 una mayor flexibilidad en términos de temas, requisitos de escalamiento y resolución, y un mantenimiento más sencillo.
Animaciones de porcentaje
El equipo de Interacciones también está proporcionando compatibilidad para 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 algo un 20% o deslizar un menú responsivo de la barra lateral desde fuera de la pantalla con un elemento como translateX: -100%.
Estos tipos de animaciones de la IU son relativamente comunes, pero, por el momento, no aprovechan la aceleración de hardware porque antes no pudimos componer esas animaciones. Los porcentajes de 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 mediante hardware.
¿Qué viene después?
Estas animaciones actualizadas facilitarán mucho el estilo web. Y como se mencionó anteriormente, el equipo siempre busca ver las próximas necesidades 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 mucho más eficaces en la Web. Cuando el rendimiento se combina con la interactividad, ¡todos ganan!
Imagen de portada: Siora Photography para Unsplash