Eine winzige CSS-Animation verursachte 60% CPU- und 25% GPU-Auslastung auf meinem M2 MacBook
2025-07-23
Eine scheinbar unbedeutende CSS-Animation verursachte auf mysteriöse Weise 60% CPU- und 25% GPU-Auslastung auf meinem M2 MacBook. Dieser Beitrag beschreibt den Debugging-Prozess mithilfe der Performance-Profiling-Tools von Chrome DevTools, um den Übeltäter zu identifizieren: die Animation der `height`-Eigenschaft. Der Autor erklärt die Rendering-Pipeline des Browsers und zeigt, wie der Wechsel zur günstigeren `transform`-Eigenschaft (mit einem cleveren Workaround, um visuelle Artefakte zu vermeiden) den Ressourcenverbrauch drastisch auf unter 6% CPU und 1% GPU reduzierte.
Mehr lesen
Entwicklung
Browser-Rendering