たった一行で重いスクロールが軽快に！will-change属性を付けるとFPSが上がる理由 - Qiita

HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？ フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。 しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。 今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。 サンプルを使ってFPSを実際に測定してみる 今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const

[living]

大量のリストを扱うなら仮想スクロールを使うべき。will-changeは低スペックな端末では逆効果になることがある https://developer.mozilla.org/ja/docs/Web/CSS/will-change

[kote2kote2]

ゲームの記事かと思った

[deokisikun]

これは面白いハックなお話。

[lifeisadog]

スクロールが重いときは、表示形式そのものを変更する方がいいと思うよ。

[mami-hate]

translate3dを使わなくてもいいんだ...!!

[threeMonths]

fps計測のやつが気になる

[otoan52]

なるほど

[Wacky]

“概ねの共通処理としては、transformやscrollOffsetが変更された時に、新たに「コンポジットレイヤー」なるものを生成してくれます。”

[maecchi]

環境の違いによってどのくらいFPSが上がるのか気になるので今度試してみよう

[boxshiitake]

ブラウザによって挙動が違ったりするのだろうか

[nilab]

たった一行で重いスクロールが軽快に！will-change属性をつけるだけでFPSが爆上がりするという話。 - Qiita

[sho_yamane]

will-changeの効果半信半疑で使わなかったけど今度計測してみよ