JavaScript客户端处理大文件报paused before potential out of memory crash如何解决

你遇到的paused before potential out of memory crash是Chromium内核浏览器的主动内存保护机制，触发原因核心是全量数据一次性加载到JS内存导致内存超出浏览器单标签页配额：

• 单标签页的内存配额一般为：32位浏览器最高2GB，64位浏览器最高4~8GB，超出就会触发防崩溃拦截
• JS的对象、字符串存在额外的隐式内存开销：单个空JS对象就占约50字节，字符串默认用UTF-16存储，每个字符占2字节，比二进制存储高1倍以上。按20列、每列平均10字符计算，500万行数据仅字符串开销就达2GB，加上数组、对象头的额外开销，很容易超出配额
• 一次性全量读取文件的逻辑会产生更高的内存峰值：原始文件内容、解析过程的中间变量、最终存储的数组同时占用内存，会比实际数据的内存占用高2~3倍，进一步加快内存耗尽速度

所有方案均不需要服务端支持，也不需要额外的数据库管理系统：

• 放弃全量数据一次性加载的逻辑，改用流式读取+边读边处理的模式，不需要把所有数据存入全局数组，处理完的行直接释放内存，内存占用可以稳定在几十MB级别
• 如果业务必须要支持全量数据随机访问，改用浏览器内置的IndexedDB做客户端存储，它直接读写本地磁盘，不需要把全量数据加载到内存，支持千万级数据的存储和查询，完全符合纯客户端的要求
• 优化数据存储格式：必须在内存中留存的数据，不要用普通JS对象存储，改用ArrayBuffer、TypedArray存储二进制格式，数字直接存对应精度的类型数组，字符串转UTF-8编码的Uint8Array，内存开销可以降到普通JS对象的1/5~1/10
• 把解析、计算逻辑迁移到Web Worker中运行，不会阻塞主线程，同时Worker的内存配额和主线程独立，可使用的总内存更高，也不会触发页面卡顿的相关提示

针对纯客户端、最高1000万行的处理需求，最优方案是流式分片遍历：

• 用浏览器原生的Streams API读取本地File对象，按128KB~1MB的大小分片读取文件内容，不需要一次性加载全量文件
• 自行实现轻量的文本/CSV流式解析：每拿到一个分片就按换行符拆分，处理跨分片的换行边界，每解析出完整的一行就触发处理逻辑
• 采用批量处理优化：每攒够1000~5000行再做批量计算，减少函数调用开销，处理完一批后主动把这批数据的引用置为null，主动触发垃圾回收，避免内存堆积
• 如需支持断点续处理，可以把当前处理的文件哈希、偏移量、中间结果存在localStorage或IndexedDB中，页面意外崩溃后可以直接从断点继续处理，不需要从头开始
• 如果需要全量遍历已经存入IndexedDB的数据，用IndexedDB自带的游标接口遍历，每次仅加载当前需要的1条或一批数据，内存占用同样可以维持在很低的水平

内容的提问来源于stack exchange，提问作者Black Devil