Large JSON Parsing: 100MB データを前提にした高速フロントエンド描画
2024-06-18
ログ閲覧や分析画面では JSON が数十 MB を超えることがあります。全部を一気に parse・描画する設計は、タブ停止の原因になります。
時間が消える場所
JSON.parse は同期処理で CPU 負荷が高く、巨大オブジェクトはヒープを圧迫します。
実際には parse より全件 DOM 描画の方がボトルネックになることが多いです。
Web Worker で parse
文字列やバッファを Worker に渡してメインスレッド外で parse します。
戻り値は必要ページだけに絞り、巨大グラフを丸ごと返さないのが重要です。
仮想リスト
配列データは表示範囲のみ描画し、スクロールで差し替えます。
ツリーは展開時に子ノードを遅延読み込みします。
ストリーミングと分割
JSON Lines は段階処理しやすく、巨大配列はサーバー側ページングが有効です。
fetch + ReadableStream で逐次処理し、待ち時間を減らせます。
100MB 実務アドバイス
基本はサーバーでフィルタ・ページング・圧縮を実施します。
クライアント単独処理なら Worker、仮想化、進捗表示、メモリ監視をセットで導入します。