当我发现浏览器的“隐藏宝藏“时：Web Streams API 让我重新审视数据流

前言：一个普通周三的bug hunt

那是一个普通的周三下午，我正端着第三杯咖啡，盯着Jira上那个标着"P0"的bug单发呆。问题很简单也很复杂：用户上传的大文件（几百MB的视频）经常导致页面卡顿，甚至直接崩溃。

“又是内存问题”，我心里默默吐槽，准备写个常规的文件分片上传方案。但就在翻MDN文档的时候，我无意中点进了一个从未注意过的API：Web Streams API。

那一刻，就像发现了浏览器的隐藏宝藏。

什么是Web Streams API？

简单来说，Web Streams API就是浏览器原生的"流"处理方案。如果你用过Node.js的stream，那理解起来会很轻松。如果没用过也不要紧，把它想象成一条流水线：数据像水一样一点点流过，而不是一次性倾倒进内存。

传统的文件处理是这样的：

// 老方法：一次性读取整个文件到内存
const fileInput = document.getElementById('file');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const buffer = await file.arrayBuffer(); // 砰！内存爆炸
  // 处理buffer...
});

而用Stream的方法：

// 新方法：流式处理，内存友好
const stream = file.stream();
const reader = stream.getReader();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  
  // 一小块一小块地处理数据
  processChunk(value);
}

实战：构建一个流式文件哈希计算器

让我用一个真实场景来演示。有次产品经理跑过来说：“能不能在上传前就计算文件的MD5，防止重复上传？”

我的第一反应是"简单"，第二反应是"等等，如果是个2GB的文件怎么办？"

这时候Web Streams就派上用场了：

async function calculateMD5Stream(file) {
  // 使用Web Crypto API + Streams的组合拳
  const stream = file.stream();
  const reader = stream.getReader();
  
  // 创建一个哈希计算器
  const hasher = new Crypto.subtle.digest('SHA-256', new Uint8Array());
  
  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      
      // 增量更新哈希值
      hasher.update(value);
      
      // 顺便更新进度条
      updateProgress(value.byteLength);
    }
    
    return hasher.finalize();
  } finally {
    reader.releaseLock();
  }
}

进阶玩法：TransformStream

如果说ReadableStream是水龙头，WritableStream是下水道，那TransformStream就是中间的过滤器。

有次我需要实现一个实时的图片压缩功能，用户选择图片后，在上传过程中就进行压缩：

class ImageCompressTransform {
  constructor(quality = 0.8) {
    this.quality = quality;
  }
  
  start() {
    this.canvas = new OffscreenCanvas(800, 600);
    this.ctx = this.canvas.getContext('2d');
  }
  
  async transform(chunk, controller) {
    // 将图片数据块转换为压缩后的数据
    const compressed = await this.compressChunk(chunk);
    controller.enqueue(compressed);
  }
  
  flush(controller) {
    // 清理资源
    this.canvas = null;
    this.ctx = null;
  }
}

// 使用Transform
const compressStream = new TransformStream(new ImageCompressTransform());
const compressedData = originalStream
  .pipeThrough(compressStream)
  .pipeTo(uploadStream);

踩坑记录：那些让人头疼的细节

坑1：忘记释放Reader

刚开始用的时候，我经常忘记调用reader.releaseLock()，结果导致流被锁死，其他地方无法读取。这个bug找了我半天：

// 错误示范
const reader = stream.getReader();
const { value } = await reader.read();
// 忘记 reader.releaseLock() 了！

// 正确做法：使用try-finally
const reader = stream.getReader();
try {
  const { value } = await reader.read();
  // 处理数据
} finally {
  reader.releaseLock(); // 永远记得释放
}

坑2：背压处理

Stream有个概念叫"背压"（backpressure），简单说就是当数据生产速度比消费速度快时的处理机制。我曾经天真地以为浏览器会自动处理，结果在处理网络摄像头流的时候翻车了：

// 需要手动处理背压
const writer = writableStream.getWriter();

async function writeWithBackpressure(data) {
  try {
    await writer.ready; // 等待流准备好
    await writer.write(data);
  } catch (error) {
    console.error('写入失败:', error);
  }
}

性能对比：数据说话

我做了个简单的测试，处理一个500MB的文件：

方法	内存峰值	处理时间	卡顿情况
传统方法	500MB+	3.2s	严重卡顿
Stream方法	50MB	3.8s	无卡顿

虽然Stream稍微慢了一点，但用户体验提升巨大。特别是在移动设备上，内存友好意味着不会因为内存不足而崩溃。

实际应用场景

1. 大文件上传

function createUploadStream(file, url) {
  const stream = file.stream();
  
  return stream.pipeThrough(
    new TransformStream({
      transform(chunk, controller) {
        // 可以在这里添加加密、压缩等
        controller.enqueue(chunk);
      }
    })
  ).pipeTo(
    new WritableStream({
      async write(chunk) {
        // 发送数据块到服务器
        await fetch(url, {
          method: 'POST',
          body: chunk,
          headers: { 'Content-Type': 'application/octet-stream' }
        });
      }
    })
  );
}

2. 实时数据处理

比如处理WebRTC的音视频流，或者WebSocket传来的实时数据：

// 处理实时音频数据
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(mediaStream => {
    const audioTrack = mediaStream.getAudioTracks()[0];
    const processor = new MediaStreamTrackProcessor(audioTrack);
    
    processor.readable
      .pipeThrough(audioEnhanceTransform)
      .pipeTo(audioOutputSink);
  });

浏览器兼容性：现实总是骨感的

虽然Web Streams很香，但兼容性是个现实问题。目前主流浏览器支持情况：

• Chrome 89+ ✅
• Firefox 102+ ✅
• Safari 14.1+ ✅
• IE… 算了，不说了 😅

对于需要兼容老浏览器的项目，可以考虑polyfill或者渐进增强：

function createFileProcessor(file) {
  if ('stream' in File.prototype) {
    return new StreamFileProcessor(file);
  } else {
    return new LegacyFileProcessor(file);
  }
}

总结：拥抱流式思维

Web Streams API不仅仅是个技术工具，更是一种思维方式的转变。从"批处理"到"流处理"，从"一次性加载"到"按需消费"。

在这个用户体验为王的时代，让页面不卡顿、让大文件处理更优雅，这些看似小的改进，往往能带来巨大的用户满意度提升。

下次遇到大数据处理的场景时，不妨试试Web Streams。说不定你也会像我一样，发现这个浏览器的"隐藏宝藏"。

最后，如果你的产品经理又提出什么"能不能实时处理用户上传的4K视频"这样的需求，你可以淡定地回答：“没问题，我有Stream。”

---

写于某个加班到深夜的周四，第四杯咖啡的陪伴下。希望这篇文章能帮到同样在前端路上摸索的你。