PRO performance big-data lazy-loading 1m-rows
1,000,000行 — 遅延ロード
スクロールバーは100万行を表しながら、フェッチされるのは可視行のみ。どこへジャンプしても、グリッドが保持するのは数百行だけ。
デモの解説
このデモは 1,000,001 行のグリッド（100 万データ行 + ヘッダー）に遅延ロード・データソースを接続します。事前ロードは一切なし: 画面に入った行 + 100 行のバッファだけを疑似サーバーからフェッチします — スクロールに合わせてフェッチログがリクエストを合体させる様子を観察できます。
- スクロールバーをドラッグするか「Jump to row」を使用 — ビューポートは1往復分だけ空白になり、その後1回の再描画で埋まる
- フェッチログは各 load() 呼び出しを連続した行範囲として表示 — フェッチはスクロール停止ごとに1回、セルごとには決して発生しない
- スクロールバーが 100 万行を表す間も「Cached rows」は数百行のまま — それがデータのメモリフットプリントの全て
- 疑似サーバーのレイテンシ（0 / 100 / 500 ms）を切り替えて、遅いバックエンドでの劣化の仕方を確認
- 「Invalidate All」はキャッシュを破棄して内部エポックを進めるため、飛行中のレスポンスも破棄される — その後、可視範囲が自動で再ロード
- 各行は行番号から決定論的に生成される（行 id をキーにした実際のバックエンドと同じ）— スクロールして戻っても同じデータ
主要 API
ws.setDataSource(config) オンデマンド・データソースを接続: totalRows でグリッドをリサイズ、load(rows) はバッチ化・重複排除済みの行番号で呼ばれる
config.bufferRows スクロール時に可視範囲を超えて先読みする行数（デフォルト 50）— ゆっくりしたスクロール中のレイテンシを隠す
handle.invalidateAll() / invalidateRows(rows) キャッシュ行を破棄して可視範囲を再ロード — サーバー側のデータ変更やライブ更新に使用
handle.detach() ロード済みデータを保持したままデータソースを切断 — シートはフェッチ済みデータを持つ通常のスプレッドシートになる
ソースコード
TypeScript