Aceleración de Hardware y Uso de WillChange en Animaciones
Clase 18 de 20 • Curso de Transformaciones y Transiciones en CSS
Resumen
La aceleración por hardware permite usar componentes específicos de tu ordenador para quitar trabajo al procesador de tu dispositivo. Uno de estos componentes puede ser una tarjeta gráfica, que puede usarse para renderizar o mostrar el contenido del navegador en tu pantalla.
Propiedades al animar
En la clase anterior, aprendiste que existen propiedades que se deben animar y otras que no, esto se debe a un proceso de renderizado, este proceso consta de varios pasos: JavaScript, Style, Layout y Composite. Los tres últimos determinan si son adecuados para una animacion, con respecto al rendimiento. Las propiedades recomendables son opacity y transform, porque estas solo necesitan del último paso.
Problemas de la aceleración por hardware
- Las imágenes no cargan correctamente.
- En los vídeos, la imagen o el sonido no se reproduce correctamente.
- Algunas partes del navegador aparecen mal diseñadas.
Propiedad will-change
La propiedad will-change de CSS sirve para anticipar y preparar los cambios de una transformación. Este tipo de optimizaciones puede aumentar la capacidad de respuesta de una página al realizar un trabajo potencialmente costoso en rendimiento.
En el siguiente ejemplo, observa la transición con una propiedad no recomendable y luego agregando la propiedad will-change. ¿Notaste que la transición no es fluida? ¿Qué tanto tiembla el elemento?
- Ejemplo comparativo para usar “will-change”.{target="_blank"}
El elemento con la propiedad no recomendable tiembla un poco porque la animación no es fluido y requiere de más recursos, impactando en el rendimiento de la animación.
Documentación de will-change
Contribución creada por Andrés Guano, con aportes de Carlos Mazzaroli.