Une petite animation CSS a causé 60% d'utilisation du CPU et 25% d'utilisation du GPU sur mon MacBook M2

Une animation CSS apparemment insignifiante consommait mystérieusement 60% du CPU et 25% du GPU sur mon MacBook M2. Cet article détaille le processus de débogage à l'aide des outils de profilage des performances de Chrome DevTools pour identifier le coupable : l'animation de la propriété `height`. L'auteur explique le pipeline de rendu du navigateur et montre comment passer à la propriété `transform`, moins coûteuse (en utilisant une solution astucieuse pour éviter les artéfacts visuels), a considérablement réduit la consommation des ressources à moins de 6% du CPU et 1% du GPU.