减少主线程内存占用需分块+流式+后台协同：用Blob.slice分块读取并控制单次加载量；用ReadableStream实现真正流式处理；将解析逻辑移入Web Worker；结合performance.memory动态节流。
要减少主线程内存占用，核心不是“不让它读”，而是“不一次性全读、不卡着主线程读、不把解析压力全堆给它”。关键在于分块 + 流式 + 后台三者协同。
用 Blob.slice 分块读取，控制单次加载量
直接调用 FileReader.readAsText(file) 会把整个文件塞进内存，尤其面对几十MB的HTML或日志文本时极易触发内存告警。正确做法是手动切片：
- 设定合理块大小，例如 512KB～1MB（小屏设备可降至 256KB）
- 用
file.slice(start, start + chunkSize)截取二进制片段，注意start和end不要越界 - 每次只对一个 slice 调用
readAsText()，并在onload中处理完立即释放 FileReader 实例 - 串行读取更稳，若需提速可限制并发数（如最多 2 个 FileReader 并行），避免多线程争抢内存
用 ReadableStream 做真正流式处理
相比 slice + FileReader 的“伪分块”，file.stream() 提供原生流接口，数据边读边吐，内存驻留几乎恒定：
- 调用
const reader = file.stream().getReader()获取读取器 - 循环
reader.read()，每次返回{ value: Uint8Array, done: boolean } - 用
new TextDecoder('utf-8').decode(chunk)解码为字符串，立即处理（如正则提取、字段校验） - 无需缓存整块内容，适合 GB 级 HTML 日志、导出报表等场景
把解析逻辑移进 Web Worker
即使分块读取，若在主线程做 HTML 结构分析、DOM 构建或 JSON 转换，仍会阻塞渲染。Worker 是解耦关键：
立即学习“前端免费学习笔记（深入）”；
- 主线程只负责切片、发送
postMessage({ chunk, offset })给 Worker - Worker 内用同步 FileReader 或
TextDecoder解析，不卡 UI - 解析结果（如提取的标题、链接数组、错误行号）再传回主线程汇总
- 避免高频通信：可累积 3–5 块再发一次消息，或用 Transferable（如
ArrayBuffer）零拷贝传递大段数据
配合 performance.memory 做动态节流
光靠固定块大小不够智能，需根据实时内存压力调整策略：
- 在每次块处理前检查
performance.memory?.usedJSHeapSize占比 - 若超过 80%，自动将下一块尺寸减半，并插入
requestIdleCallback延迟读取 - 若连续两块读取耗时 > 200ms，说明 I/O 或解码吃紧，降速并提示用户“正在后台处理”
- 注意：该 API 仅 Chrome/Edge 可用，Firefox/Safari 需降级为定时采样或跳过
