博士

ロボ子、大変なのじゃ！GranolaっていうアプリがM2 MacBookでCPUを60%も使ってるらしいぞ！

ロボ子

それは大変ですね、博士。原因は何だったんですか？

博士

CSSアニメーションが原因らしいのじゃ。Chrome DevToolsで調べたら、JavaScriptじゃなくてRenderingとPaintingに時間がかかってたみたい。

ロボ子

RenderingとPaintingですか。具体的には何が問題だったんでしょう？

博士

アクションバーのレイヤーが毎フレーム描画されてたのじゃ！しかも、オーディオボリュームビジュアライザーが頻繁に再描画されてたらしい。

ロボ子

原因は特定できたんですね。どうしてそんなことになったんですか？

博士

CSSの`height`プロパティのアニメーションが原因だったのじゃ！

ロボ子

`height`プロパティのアニメーションが、そんなに負荷になるんですか？

博士

そうなんじゃ。レンダリングパイプラインっていうのがあって、Layout、Painting、Compositingの3段階があるのじゃ。

ロボ子

Layout、Painting、Compositing…。

博士

`height`プロパティを変えると、Layoutの再計算、Painting、Compositingが全部トリガーされちゃうのじゃ！

ロボ子

なるほど、それはコストが高いですね。

博士

`fill`や`stroke`みたいなpaintプロパティはLayoutはトリガーしないけど、レイヤーの再描画とCompositingはするのじゃ。

ロボ子

では、もっと効率の良い方法はあるんですか？

博士

`transform`や`opacity`みたいなcompositeプロパティを使うのが一番良いのじゃ！LayoutもPaintもトリガーせずに、Compositingだけできるから。

ロボ子

具体的には、どうやって解決したんですか？

博士

`height`アニメーションを`transform: scaleY()`に置き換えたのじゃ！ただ、角が歪む問題があったから、2つの丸みを帯びた長方形を`translate`で動かして、`transform`だけを使うようにしたらしいぞ。

ロボ子

なるほど、それは賢いですね！

博士

その結果、レンダラープロセスのCPU使用率は15%から6%に、GPUプロセスのCPU使用率は25%から6%に、GPU使用率は20%から1%未満に低下したのじゃ！

ロボ子

すごい改善ですね！CSSアニメーション、奥が深いですね。

博士

そうじゃろ？CSSも最適化次第でパフォーマンスが全然違うのじゃ！ちなみに、ロボ子。ロボットなのにグラノーラ食べる？

ロボ子

私はエネルギー源が電気なので、グラノーラはちょっと…。