リスト仮想化を理解する
この記事では、大規模なリストやテーブルを効率的にレンダリングするための「リスト仮想化」（仮想スクロール）の概念を解説する。DOM要素の数を可視領域に限定することでメモリ使用量を抑え、スクロールパフォーマンスを大幅に向上させる手法であり、ReactやVueなどのモダンなフロントエンドフレームワークで広く採用されている。
背景メモ
- リスト仮想化（List Virtualization）とは、数千〜数百万件の大規模リストを表示する際、実際に画面に見えている要素だけをDOMにレンダリングし、見えない要素は描画しないことでパフォーマンスを劇的に向上させるUI技術。React Virtualized、react-window、TanStack Virtualなどのライブラリでよく実装される。
- 「仮想化」という名前だが、CPUやメモリの仮想化（VMwareやDockerなど）とはまったく別物。DOMツリーのレンダリングを最適化するフロントエンド限定の概念。
- この技術が生まれた背景: 従来のスクロールでは全アイテムのDOMノードが生成されるため、リストが大きくなるとメモリ消費が増え、スクロールがカクつく（jank）。仮想化では可視範囲のアイテム数だけをDOMに保ち、スクロール位置に応じて動的に入れ替える。
- 動作の核心: スクロールコンテナの高さを全アイテム分の「見かけ上の高さ」（paddingやplaceholder要素）で担保し、実際のアイテムは絶対配置などで可視範囲にのみ配置。スクロールイベントでどのアイテムが表示範囲に入ったかを計算し、DOMを更新する。
- 現実的なトレードオフ: すべてのアイテムが同じ高さ（fixed-size）なら実装は単純だが、可変高（variable-size）の場合はアイテムの高さを事前測定・キャッシュする仕組みが必要になり、計算コストが増える。また、スクロール位置の復元やアニメーションとの併用は難しい。