分块读取是处理大文件的必要手段，推荐 Blob.slice + FileReader 或 ReadableStream 流式解析，并结合 Web Worker 防主线程阻塞，动态调整块大小与节奏控制以适配不同设备。
直接读取大文件容易卡住页面，核心在于避免把整个文件一次性塞进内存。分块读取不是“锦上添花”，而是处理几MB以上文本、JSON、XML或日志类文件的必要手段。
用 Blob.slice 切片 + FileReader 异步读取
这是兼容性最好、逻辑最清晰的起点。File 对象本身就是 Blob 的子类，slice() 不复制数据，只生成新引用，开销极低。
- 设定合理块大小：起步可用 512KB–1MB，太大易触发内存压力，太小则 I/O 调用频繁
- 按字节偏移切分：例如
file.slice(0, 1024 * 1024)读第1块，file.slice(1024 * 1024, 2 * 1024 * 1024)读第2块 - 每个 FileReader 实例只读一块，
onload中处理完当前块再启动下一块，防止并发失控 - 务必检查
start < file.size，避免越界导致空内容或报错
用 ReadableStream 流式解析（现代浏览器首选）
对于超大纯文本或结构化数据（如 JSON 日志、XML 报文），流式处理更自然，内存占用稳定在 KB 级别。
- 调用
file.stream()获取可读流，再用getReader()创建 reader - 循环
reader.read()，每次拿到{ value: Uint8Array, done }，用TextDecoder().decode()转字符串 - 配合轻量解析器（如
stream-json或自定义状态机）边流边提取关键字段，跳过无关内容 - 注意：Safari 和旧版 Firefox 不支持
file.stream()，需降级到slice + FileReader
把解析任务移到 Web Worker 防止主线程冻结
哪怕只是对每块做 JSON.parse 或正则匹配，在几百KB以上的文本上也可能让 UI 卡顿超过100ms。Worker 是解耦的关键。
立即学习“前端免费学习笔记（深入）”；
- 主线程只负责切片、创建
Blob并postMessage传给 Worker - Worker 内部用同步方式读取（
blob.text()或new FileReaderSync），无事件循环干扰 - 解析结果按需聚合（比如每 50 条返回一次），避免高频通信拖慢整体速度
- 错误处理也应在 Worker 内完成，只把结构化错误信息发回主线程
动态调整块大小与节奏控制
固定块大小不适应所有设备。低端手机读 1MB 可能要 300ms，而桌面端只要 20ms。主动适配才能稳。
- 用
performance.now()记录每块读取耗时，若连续两块 >200ms，自动减半块大小 - 在块间插入
requestIdleCallback，让浏览器优先响应用户操作 - 对含大量重复结构的数据（如日志行），可在解析中检测行边界，按“逻辑行”而非固定字节切分，提升语义完整性
