Uma pequena animação CSS causou 60% de uso da CPU e 25% de uso da GPU no meu MacBook M2

Uma animação CSS aparentemente insignificante estava misteriosamente consumindo 60% da CPU e 25% da GPU no meu MacBook M2. Este post detalha o processo de depuração usando as ferramentas de perfil de desempenho do Chrome DevTools para identificar o culpado: animar a propriedade `height`. O autor explica o pipeline de renderização do navegador e demonstra como mudar para a propriedade `transform`, mais barata (usando uma solução inteligente para evitar artefatos visuais), reduziu drasticamente o consumo de recursos para menos de 6% de CPU e 1% de GPU.