Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSパフォーマンスに関する計測結果

poteboy
November 30, 2023

 CSSパフォーマンスに関する計測結果

CSSパフォーマンスに関して計測した結果を発表しました。
パフォーマンス改善系の話は具体的な改善手法みたいなのがウケてしまいがちだけど普遍的に適用できる手法は案外多くなくて、「理論的に最適な⼿法が実際に(あなたの環境でも)最適かどうかは計測するまで分からない」って事が言いたかったです。だから、ベンチマークの提示もない改善手法に飛び付かず、計測⇄ボトルネック特定⇄改善のサイクルを回すことが大切です。
この発表の10日前にJSConf JPで発表があり、JSConfが終わって10日間の間にゆっくり資料をつくるつもりだったものの体調を崩して1週間ほど何もできない日々が続き、大急ぎで資料を作りました。
無事に発表を終えることができてよかったです。

poteboy

November 30, 2023
Tweet

More Decks by poteboy

Other Decks in Technology

Transcript

  1. © 2023 THECOO inc.. OSS - Creator of Kuma UI -

    Core Contributor to Million.js GitHub poteboy Twitter @_poteboy_ 2 poteboy name ⾃⼰紹介
  2. © 2023 THECOO inc. ハードウェアアクセラレーション transformとopacityの2つのプロパティはレンダリングに関する処理 をCPUからGPUに譲渡できる。 ブラウザの場合は独⽴したレイヤ(Composite Layer)としてGPUに 命令を送り⾼速なレンダリングを実現する。この処理をCompositing

    という また、事前にそれらの値が変わる(アニメーションする)ことが分 かってることはwill-changeプロパティを⽤いて事前にGPU転送できる 参考 :https://web.dev/articles/stick-to-compositor-only-properties-and -manage-layer-count?hl=ja
  3. © 2023 THECOO inc. Inline Stylesは遅いのか? Reactのドキュメンテーションには以下のような記述がある 「CSS classes are

    generally better for performance than inline styles.」 https://legacy.reactjs.org/docs/faq-styling.html#are-inline-styles-bad これは本当か? HTML + 外部CSSファイルには先ほどの計測結果を⽤いる。 HTML + インラインスタイルを計測してみる。