Streams API 实战：浏览器端流式大文件处理架构

为什么需要流式处理？

传统方式读取大文件：

// ❌ 200MB 文件 → 200MB ArrayBuffer → 可能 OOM
const buffer = await file.arrayBuffer();
processEntireBuffer(buffer);

流式处理：

// ✅ 每次只处理 64KB chunk
const stream = file.stream();
for await (const chunk of stream) {
  processChunk(chunk); // 64KB
}

对比	全量加载	流式处理
内存占用	文件大小	~64KB (chunk 大小)
开始处理	全部读完	第一个 chunk 到达
200MB 文件	200MB 内存	~64KB 内存
1GB 文件	可能 OOM	正常运行

---

三种核心 Stream

ReadableStream  →  数据源（文件、网络响应）
TransformStream →  中间处理（压缩、加密、格式转换）
WritableStream  →  数据目的地（文件下载、网络上传）

ReadableStream

const response = await fetch('/large-file.pdf');
const reader = response.body!.getReader();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  console.log(`Received ${value.byteLength} bytes`);
}

TransformStream

const compressor = new TransformStream({
  transform(chunk, controller) {
    const compressed = gzipSync(chunk);
    controller.enqueue(compressed);
  }
});

// 管道连接
fileStream.pipeThrough(compressor).pipeTo(downloadStream);

---

背压 (Backpressure)

当生产者速度 > 消费者速度时，Stream 自动暂停生产者：

FileReader (快) → [缓冲区满] → 暂停读取
                      ↓
              TransformStream (慢) → 消费 chunk → 缓冲区有空间 → 恢复读取

这是 Stream 相比手动 chunk 循环的核心优势——自动流量控制，无需手动管理缓冲区大小。

---

工具库中的流式应用

Gzip 压缩/解压

压缩解压工具 使用 CompressionStream API：

const compressed = file.stream().pipeThrough(new CompressionStream('gzip'));
// 流式压缩，无需全量加载

大 PDF 分块读取

async function* readPdfChunks(file: File, chunkSize = 4 * 1024 * 1024) {
  let offset = 0;
  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    yield await chunk.arrayBuffer();
    offset += chunkSize;
  }
}

for await (const chunk of readPdfChunks(largePdf)) {
  await processPdfChunk(chunk);
}

流式下载

const stream = new ReadableStream({
  async start(controller) {
    for await (const chunk of generateChunks()) {
      controller.enqueue(chunk);
    }
    controller.close();
  }
});

const response = new Response(stream, {
  headers: { 'Content-Disposition': 'attachment; filename="output.zip"' }
});

---

Stream API 兼容性

API	Chrome	Firefox	Safari	Edge
ReadableStream	52+	65+	10.1+	79+
TransformStream	80+	102+	14.1+	80+
CompressionStream	80+	113+	16.4+	80+
File.stream()	76+	69+	14.1+	79+

CompressionStream 较新，不支持的浏览器回退到 pako/fflate 库的全量处理。

---

总结

Streams API 是处理大文件的现代标准。ReadableStream 分块读取、TransformStream 中间处理、背压自动流控——这套机制让浏览器端处理 GB 级文件成为可能，是工具库大文件工具（PDF、视频、压缩）的底层基础设施。