Una pequeña animación CSS causó un 60% de uso de la CPU y un 25% de uso de la GPU en mi MacBook M2
2025-07-23
Una animación CSS aparentemente insignificante estaba consumiendo misteriosamente un 60% de la CPU y un 25% de la GPU en mi MacBook M2. Esta publicación detalla el proceso de depuración utilizando las herramientas de perfil de rendimiento de Chrome DevTools para identificar al culpable: animar la propiedad `height`. El autor explica el pipeline de renderizado del navegador y demuestra cómo cambiar a la propiedad `transform`, más barata (utilizando una solución inteligente para evitar artefactos visuales), redujo drásticamente el consumo de recursos a menos del 6% de la CPU y el 1% de la GPU.