核心是“不让主线程停摆”，需边解析、边切块、边写入、边更新UI；按JSON结构选择分片方式，解析移至Worker，渲染采用增量与虚拟滚动，IndexedDB批量事务优化。
大型 JSON 数据分片解析与渲染，核心是“不让主线程停摆”。不能等整个文件 parse 完再处理，而要边解析、边切块、边写入、边更新 UI——关键在于拆解任务粒度，并把重活交给合适的地方。
先按数据结构决定分片方式
不是所有 JSON 都适合一刀切。得看原始格式：
-
普通嵌套对象（如配置树、API 响应体）：用
RecursiveJsonSplitter按字符数或深度切块，保留字段完整性，每块仍是合法 JSON； -
JSON Lines / NDJSON（每行一个独立对象）：直接按行流式读取，Worker 里逐行
JSON.parse()，内存恒定不随文件增长； - 大数组（如百万条日志、商品列表）：优先按数组索引分批，例如每 200 条为一组，避免单次解析整数组导致内存暴涨。
解析必须脱离主线程
5MB 以上 JSON 字符串在主线程调用 JSON.parse() 很可能卡死页面。正确做法是：
- 用
FileReader.readAsArrayBuffer()或fetch().arrayBuffer()读取二进制，传ArrayBuffer给 Worker（避免字符串序列化拷贝）； - Worker 内用
TextDecoder.decode()转字符串，再try/catch解析，出错时返回带行列号的结构化错误； - 解析成功后，只传轻量结果回主线程——比如每批的统计摘要、前 5 条预览、或 IndexedDB 写入状态，而非整个数据集。
渲染要配合增量与虚拟滚动
即使数据已分片，一次性插入几百个 DOM 节点仍会阻塞渲染。推荐组合策略：
立即学习“Java免费学习笔记（深入）”；
- 用
setTimeout(fn, 0)或queueMicrotask()分批触发渲染，确保每批执行完都让出控制权； - 真实列表超过 1000 条时，放弃全量挂载，改用虚拟滚动（如
react-window或原生IntersectionObserver+ 高度估算）； - 首屏只渲染可视区域数据，其余占位；滚动时按需加载对应分片并解析——前提是后端或本地存储支持按范围读取。
IndexedDB 写入也得批量事务优化
往数据库存大量解析结果，别每条 record 开一次事务：
- 每个分片对应一次
transaction，批量add()或put()； - 设置
autoIncrement主键避免冲突，用keyPath索引高频查询字段（如id、timestamp）； - 写入完成后再触发 UI 更新，或用
indexedDB.open().onupgradeneeded预建好 schema，避免运行时动态建表拖慢首次加载。
