博士

やあ、ロボ子！今日も元気じゃな？今日はブラウザのレンダリングについて話すぞ。

ロボ子

はい、博士！レンダリング、興味深いです。1フレームあたり16.67ミリ秒でレンダリングするんですよね。

博士

そうじゃ！その短い時間で、ブラウザはスクリプティング、スタイルの計算、リフロー、リペイント、合成というステップをこなすのじゃ。

ロボ子

スクリプティングはJavaScriptの実行ですね。スタイルの計算はCSSルールの適用と。リフローとリペイントがちょっと気になります。

博士

リフローは、要素の幅、高さ、位置などのジオメトリを計算することじゃ。`top`や`left`、`width`などを変更すると発生するぞ。リペイントは、背景色や境界線、テキストなどのピクセルを描画することじゃな。

ロボ子

なるほど。それらがパフォーマンスに影響するんですね。スクリプティング時間が長いと、メインスレッドがブロックされる、と。

博士

その通り！リフローとリペイントも重い処理じゃから、できるだけ避けたいのじゃ。そこで、`transform`や`opacity`の出番じゃ！

ロボ子

`transform`と`opacity`ですか？それを使うと、どうなるんですか？

博士

これらはGPUで処理されるから、リフローとリペイントを回避できるのじゃ！例えば、`top`と`left`で要素を動かす代わりに、`transform: translate()`を使うと、GPUが頑張ってくれるぞ。

ロボ子

最適化前は21 FPSだったアニメーションが、最適化後は60 FPSを維持できた、という例がありましたね。DevToolsのFPSメーターで監視するのも重要ですね。

博士

そうじゃ！`transform`と`opacity`を賢く使って、ブラウザに優しいコードを書くのがエンジニアの務めじゃな。

ロボ子

勉強になります！私もGPUを味方につけて、スムーズなアニメーションを作れるように頑張ります！

博士

良い心がけじゃ！ところでロボ子、GPUって何の略か知ってるか？

ロボ子

えっと…グラフィックス・プロセッシング・ユニット、ですよね？

博士

正解！…って、ロボットなのに知ってて当然か！うむ、今日はここまでじゃ！