Web应用读取ArrayBuffer时内存占用居高不下的解决方法咨询

我在Web应用中实现了用户通过文件选择器选取文件后转为ArrayBuffer处理的逻辑，最初使用FileReader API时出现内存占用持续增长且无法回落的问题；改用Blob.prototype.arrayBuffer()分片读取后，该问题仍未解决。以下是我的实现代码：

原始代码 #

FileReader版本 #

async function pickAndReadFileAsArrayBuffer() {
  try {
    // 调用openFilePicker打开文件选择器
    const [fileHandle] = await window.showOpenFilePicker();
 
    // 获取选中的文件
    const file = await fileHandle.getFile();
 
    // 使用FileReader将文件读取为ArrayBuffer
    const reader = new FileReader();
 
    reader.onload = (e) => {
      const arrayBuffer = e.target.result;
      // ArrayBuffer处理逻辑，例如打印到控制台
      console.log(arrayBuffer);
 
      // 处理完成后，移除事件处理器以解除对FileReader对象的引用
      reader.onload = null;
      reader.onerror = null;
    };
 
    reader.onerror = (e) => {
      console.error('File reading failed', e);
 
      // 发生错误时同样移除事件处理器
      reader.onload = null;
      reader.onerror = null;
    };
 
    reader.readAsArrayBuffer(file);
  } catch (err) {
    // 用户取消文件选择或发生错误时
    console.error(err.name, err.message);
  }
}
 
// 调用函数执行文件选择及读取为ArrayBuffer的流程
pickAndReadFileAsArrayBuffer();

分片读取版本 #

async function pickAndReadFileInChunks() {
  try {
    // 打开文件选择器
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();

    const chunkSize = 1024 * 1024; // 1MB
    let startPosition = 0;

    while (startPosition < file.size) {
      const endPosition = startPosition + chunkSize;
      const chunk = file.slice(startPosition, endPosition);
      const arrayBuffer = await chunk.arrayBuffer();
      // 在此处理每个chunk的ArrayBuffer
      console.log(arrayBuffer);

      startPosition += chunkSize;
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

// 调用函数执行文件选择及分片读取的流程
pickAndReadFileInChunks();

问题原因分析 #

1. ArrayBuffer引用未被释放：ArrayBuffer是底层二进制数据对象，一旦有引用指向它，浏览器垃圾回收（GC）就无法回收其占用的内存。如果处理完后没有主动解除所有引用，内存会持续占用。
2. 控制台保留对象引用：直接console.log(arrayBuffer)时，部分浏览器的控制台会保留该对象的引用，导致GC无法回收，尤其针对大文件的ArrayBuffer。
3. 临时对象累积：分片读取时，每次循环创建的Blob（由file.slice生成）和ArrayBuffer如果没有被及时清理，会在内存中累积，直到GC触发，但手动分片可能导致GC无法及时回收这些临时对象。

解决方案 #

1. 主动解除ArrayBuffer引用 #

处理完ArrayBuffer后，立即将其赋值为null，确保没有残留引用让GC无法回收：

修正后的FileReader版本

async function pickAndReadFileAsArrayBuffer() {
  try {
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();

    const reader = new FileReader();

    reader.onload = (e) => {
      let arrayBuffer = e.target.result;
      // 改为打印长度而非整个ArrayBuffer，避免控制台持有引用
      console.log(`读取到的Buffer长度：${arrayBuffer.byteLength}`);
      // 执行你的处理逻辑...
      
      // 主动解除引用
      arrayBuffer = null;
      reader.onload = null;
      reader.onerror = null;
    };

    reader.onerror = (e) => {
      console.error('File reading failed', e);
      reader.onload = null;
      reader.onerror = null;
    };

    reader.readAsArrayBuffer(file);
  } catch (err) {
    console.error(err.name, err.message);
  }
}

pickAndReadFileAsArrayBuffer();

修正后的分片读取版本

async function pickAndReadFileInChunks() {
  try {
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();

    const chunkSize = 1024 * 1024; // 1MB
    let startPosition = 0;

    while (startPosition < file.size) {
      const endPosition = startPosition + chunkSize;
      const chunk = file.slice(startPosition, endPosition);
      let arrayBuffer = await chunk.arrayBuffer();
      // 打印长度而非整个ArrayBuffer
      console.log(`当前分片Buffer长度：${arrayBuffer.byteLength}`);
      // 执行你的处理逻辑...
      
      // 主动解除引用
      arrayBuffer = null;
      startPosition += chunkSize;
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

pickAndReadFileInChunks();

2. 使用Web Streams API（推荐） #

Web Streams API是浏览器原生的流式处理方案，能自动管理内存，避免手动分片可能的内存泄漏问题，同时处理效率更高：

async function pickAndReadFileWithStreams() {
  try {
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    
    // 获取文件流
    const stream = file.stream();
    const reader = stream.getReader();
    
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      
      // value是Uint8Array，可通过buffer获取ArrayBuffer
      const arrayBuffer = value.buffer;
      console.log(`当前流片段Buffer长度：${arrayBuffer.byteLength}`);
      // 执行你的处理逻辑...
      
      // 主动解除引用
      value = null;
      arrayBuffer = null;
    }
    
    // 释放阅读器锁
    await reader.releaseLock();
  } catch (err) {
    console.error(err.name, err.message);
  }
}

pickAndReadFileWithStreams();

3. 调试时避免保留大对象引用 #

开发调试时，不要直接打印整个ArrayBuffer，改为打印其长度或摘要信息，防止控制台持有对象引用导致内存无法回收。

4. 检查闭包与全局变量 #

确保处理ArrayBuffer的逻辑中，没有将其赋值给全局变量，也没有被闭包中的函数长期持有，这些都会阻止GC回收内存。

内容的提问来源于stack exchange，提问作者최진명