小さなCSSアニメーションがM2 MacBookでCPU 60%、GPU 25%の使用率を引き起こした
2025-07-23
一見取るに足りないCSSアニメーションが、私のM2 MacBookでCPU 60%、GPU 25%という謎の使用率を消費していました。この記事では、Chrome DevToolsのパフォーマンスプロファイリングツールを使用して、原因を特定するデバッグプロセスを詳しく説明します。犯人は`height`プロパティのアニメーションでした。作者はブラウザのレンダリングパイプラインを説明し、より安価な`transform`プロパティ（視覚的なアーティファクトを回避するための巧妙な回避策を使用）に切り替えることで、リソース消費をCPU 6%未満、GPU 1%未満に劇的に削減した方法を示しています。
続きを読む
開発
ブラウザレンダリング