大 JSON 文件解析优化：前端如何高性能渲染 100MB 数据
2024-06-18
日志平台或数据可视化页面偶尔会遇到几十、上百 MB 的 JSON。主线程里一把 parse、再 map 成上万行 DOM，页面会直接假死。关键是别一次性做完所有事。
瓶颈在哪？
JSON.parse 是同步 CPU 密集操作，阻塞主线程；parse 后的对象占用大量堆内存。
React/Vue 全量渲染百万节点比 parse 还慢——UI 层往往才是体感卡顿的主因。
Web Worker 里 parse
把 ArrayBuffer 或字符串 postMessage 给 Worker，在子线程 JSON.parse，完成后传回摘要或分页数据。
注意 structured clone 传大对象仍有成本；更优是 Worker 内处理完只回传当前页需要的切片。
虚拟列表 / 窗口化
数组型大 JSON：只渲染可视区域（react-window、virtua 等），滚动时再取对应 index。
树形 JSON：懒加载子节点，展开时再 parse 或读取子路径。
流式与分块
JSON Lines（每行一条）适合流式读取；标准单文件大数组可考虑 NDJSON 导出或服务端分页 API。
浏览器侧 fetch + ReadableStream 边读边处理，避免等整个 body 下载完才 parse。
100MB 的现实建议
优先让后端分页、筛选、压缩（gzip）；前端不要承诺「浏览器里打开任意大文件」。
必须本地处理：Worker parse + 虚拟滚动 + 进度条；内存峰值仍要监控（Chrome Performance）。