如何复用ArrayBuffer优化fetch API的响应性能？

当大量请求使用response.arrayBuffer()导致频繁内存分配时，可以从以下几个方向优化：

1. 手动处理ReadableStream复用缓冲区 #

Fetch的response.body是一个ReadableStream，你可以直接获取它的读取器，将数据分批写入预先分配好的ArrayBuffer中，避免每次创建新实例。

示例代码：

async function fetchAndReuseBuffer(url, buffer) {
  const response = await fetch(url);
  if (!response.ok) throw new Error('Request failed');
  
  const reader = response.body.getReader();
  const view = new Uint8Array(buffer);
  let offset = 0;
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    
    // 将读取到的数据复制到预分配的缓冲区
    view.set(value, offset);
    offset += value.length;
  }
  
  // 返回实际数据长度的缓冲区片段
  return buffer.slice(0, offset);
}

// 预分配固定大小的缓冲区（根据你的数据最大尺寸调整）
const reusableBuffer = new ArrayBuffer(1024 * 1024); // 1MB
// 复用该缓冲区发起多次请求
fetchAndReuseBuffer('/binary-data', reusableBuffer);

注意：这种方式需要预先估算数据的最大尺寸，避免缓冲区溢出。如果数据大小波动大，可以动态扩容缓冲区，但尽量减少扩容次数以降低性能损耗。

2. 复用TypedArray底层内存 #

如果业务中可以用TypedArray（比如Uint8Array）直接处理二进制数据，复用TypedArray的底层ArrayBuffer比每次创建新实例更高效：

const reusableUint8 = new Uint8Array(1024 * 1024);

async function fetchIntoTypedArray(url, targetArray) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  let offset = 0;
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    
    // 缓冲区不足时扩容（尽量减少扩容操作）
    if (offset + value.length > targetArray.length) {
      const newArray = new Uint8Array(targetArray.length * 2);
      newArray.set(targetArray);
      targetArray = newArray;
    }
    
    targetArray.set(value, offset);
    offset += value.length;
  }
  
  return targetArray.slice(0, offset);
}

3. 合并批量请求 #

如果业务逻辑允许，将多个小二进制请求合并为一个大请求，减少请求次数和内存分配频率。比如把多个资源打包成单个二进制文件，服务器返回后在客户端拆分处理，这样只需要一次大缓冲区分配。

4. 用Web Worker隔离内存操作 #

如果大量请求的处理会阻塞主线程，可将Fetch和二进制数据处理逻辑放到Web Worker中。Worker拥有独立内存空间，不会影响主线程性能，同时也能在Worker内部复用缓冲区，降低主线程的内存压力。

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