仮想スクロールとは何ぞや
はじめに
最近実務で、仮想スクロール(tanstack-virtual)に触れる機会があり、そもそも仮想スクロールって何ぞやと思い調べたことをまとめていきます。
仮想スクロールとは
仮想スクロールは、大量の連続するデータを表示する場合に、パフォーマンスを向上させるために使用される技術で、大量のデータを全て画面上にレンダリングするのではなく、見えている範囲(+α)のみレンダリングしてスクロールを実現する技術です。
GIF の通り 100 個のアイテムを持つリストですが、スクロール可能なコンテナ内で常に 10 個のアイテムのみをレンダリングし、スクロール時に表示するアイテムを動的に更新します。検証ツールを見ると、前後のアイテムはレンダリングされていないのがわかりますね。
ここでは詳細な仕組みについては扱いませんが、次の記事が参考になります！
仮想スクロールのメリット・デメリット
メリット
見えている範囲(+α)のみをレンダリングすることで
- メモリ使用量が減少し、パフォーマンスが向上する
- 行数が多くなったとしても影響がない
デメリット
- 実装が少し複雑、学習コストがかかる
- 行の高さが可変だとスクロール時にちらつきがある、スクロール位置の調整がしづらい
- 表示領域外のデータにはブラウザの検索機能が効かない
実務で使用してみて
実務ではtanstack-virtualを使用して、LINE のようなチャット機能で仮想スクロールを実現していたのですが、メッセージによって高さが変わる関係で、スクロールの位置がズレることがあり調整が難しい印象でした。
また、tanstack-virtualではチャットのような下からの逆スクロールに対応していなかったので、結果的には仮想スクロールの使用をやめ、無限スクロールに変更しました。
無限スクロールとの違い
仮想スクロールと無限スクロールは、スクロールの実現方法が異なります。
仮想スクロールは表示されている範囲内のアイテムのみをレンダリングすることでパフォーマンスを向上させます。
一方、無限スクロールはユーザーがスクロールするたびに新しいデータを読み込み、コンテンツを継続的に提供します。つまり、仮想スクロールはレンダリングの最適化に焦点を当て、無限スクロールはデータの連続供給に重点を置いています。
実務のチャット機能では初回レンダリングで 100 件のデータを取得しレンダリング、スクロール位置が一番上に来た時に追加で fetch を行うようにしました。
参考
Discussion