TechFeed Experts Night 14というオンラインイベントで、人生初登壇を果たしました。
CSSのレンダリングの仕組みを解説した上で、バグを踏まずにパフォーマンスも良好なCSSアニメーションの手法を紹介するという、8分間で「暗記不要なパフォーマンス改善の原理を理解する」コンセプトでLTを行いました。
CSSのレンダリングの仕組みを図解
CSSアニメーションのパフォーマンスを考察するには、「このCSSプロパティの値を変更すると、どの描画ステップまで影響を及ぼすか？」という視点を持つことが大切だと考えています。
そこで、ブラウザの描画がどのような手順で行われるのか、関連するCSSプロパティと合わせて解説を行いました。
なぜtopではなくtranslateを使うべきか？
位置を移動させるアニメーションでは、topプロパティやleftプロパティよりも、transformプロパティを使うべきだと言われています。
今回のLTでは、それはなぜなのか？という原理まで踏み込んだ解説を盛り込みました。
Chrome DevToolsのProfile.jsonを解析して実証
概念的な説明だけでなく、数値でも比較することで、より実感を得られる構成にしました。
CSSのレンダリング各フェーズごとにかかっている時間は、Chromeのパフォーマンス計測で取得できるProfile.jsonを独自のスクリプトで解析することで算出しています。
余談：「blurは重い」から広がった興味
このような内容の発表に至ったのは、会社の先輩から「blurは重い」という話を聞いたことがきっかけでした。
それまでの私にとって、ブラウザは完全なブラックボックスで、CSSは絵を描いてくれる魔法でしかなかったのです。
画面の裏では膨大な処理が走っていて、CSSプロパティごとにその「重さ」が異なるということに、目を向けたことはありませんでした。
それ以来、ブラウザのレンダリングの仕組みに興味を持ち、個人的に調べた内容をわかりやすい図解でまとめようと試みたのが、今回のLTです。
このLT発表を経て、さらにレンダリングへの興味は加速しました。「blurは重い」ということを体感するために、GLSLでblurを再現実装する…などといった実験もするようになりましたが、それはまた別の機会にお話ししようと思います。