JS使用Web Worker传递ArrayBuffer时内存泄漏如何解决

问题表现 #

• 向Web Worker传递GB级Uint8Array对应的ArrayBuffer时，即使调用worker.terminate()终止Worker线程，内存占用始终无法下降，疑似存在内存泄漏。

核心复现代码 #

主线程代码 #

// Main thread
const startLongTask = () => {
  setLoading(true);

  const worker = new Worker(
    new URL("../webworkers/matrix.js", import.meta.url)
  );

  worker.onmessage = ({ data }) => {
    setLoading(false);
    console.log(data);

    worker.terminate();
  };

  const matrix = new Uint8Array(1000000000);
  worker.postMessage(matrix, [matrix.buffer]);
};

Worker线程代码 #

// Worker thread
onmessage = ({ data: matrix }) => {
  const matrixView = new DataView(matrix.buffer);
  for (let i = 0; i < matrix.byteLength; i++) {
    matrixView.setInt8(i, i >= 255 ? 255 : i);
  }
  postMessage(matrix, [matrix.buffer]);
};

问题根因 #

• worker.terminate()仅会立即终止Worker线程的执行，不会自动清理主线程、Worker线程两侧持有的所有对象强引用，只要存在任意一个强引用指向大ArrayBuffer，V8 GC就不会回收该块内存
• 原代码在主线程onmessage回调中console.log(data)直接打印了回传的大体积Uint8Array，浏览器开发者工具控制台会强制持有被打印对象的强引用，只要控制台打开，该对象内存永远不会释放，属于常见的假性内存泄漏
• 主线程、Worker线程处理完数据后，没有手动解除大ArrayBuffer、DataView、Worker实例的强引用，加上超过256MB的大ArrayBuffer由V8通过mmap单独分配堆外内存，GC触发阈值更高，短时间内不会自动回收
• React函数组件中，Worker实例、大对象容易被组件重渲染产生的闭包意外持有，无法被GC识别为可回收对象
• 无意义的大Buffer回传：Worker处理完数据后将整个1GB的ArrayBuffer又transfer回主线程，但主线程实际并没有使用该Buffer做后续逻辑，平白增加了内存持有成本

修复方案 #

• 移除无意义的大对象打印：绝对不要用console.log输出大体积ArrayBuffer/TypedArray，避免控制台持有强引用
• 不需要回传原始大Buffer的场景，Worker仅回传小体积的计算结果（比如处理状态、统计值），从根源上避免大对象跨线程传输回主线程
• 所有大对象、Worker实例使用完后第一时间手动置为null解除强引用，不要等待GC自动处理
• React场景下用useRef存储Worker实例，组件卸载、任务结束时除了调用terminate()，还要同步清空ref上的Worker引用，避免闭包泄漏
• 避免频繁创建销毁Worker实例，大内存计算场景尽量复用常驻Worker，减少实例创建销毁过程中的上下文持有问题
• 开发环境可给Chrome加--expose-gc启动参数，手动调用window.gc()验证内存是否可回收，排除GC延迟导致的假性泄漏

修复后参考代码 #

主线程（React） #

import { useState, useRef, useEffect } from 'react';

const MatrixTask = () => {
  const [loading, setLoading] = useState(false);
  const workerRef = useRef<Worker | null>(null);

  // 组件卸载时兜底清理Worker
  useEffect(() => {
    return () => {
      if (workerRef.current) {
        workerRef.current.terminate();
        workerRef.current = null;
      }
    }
  }, []);

  const startLongTask = () => {
    setLoading(true);
    // 先清理上一次未完成的Worker
    if (workerRef.current) {
      workerRef.current.terminate();
      workerRef.current = null;
    }

    const worker = new Worker(new URL("../webworkers/matrix.js", import.meta.url));
    workerRef.current = worker;

    worker.onmessage = ({ data }) => {
      setLoading(false);
      // 仅处理业务需要的结果，不打印大对象
      if (data.success) console.log('任务处理完成');
      
      // 终止Worker并解除所有引用
      worker.terminate();
      workerRef.current = null;
    };

    const matrix = new Uint8Array(1000000000);
    worker.postMessage(matrix, [matrix.buffer]);
  };

  return <button onClick={startLongTask} disabled={loading}>启动大矩阵计算</button>
};

export default MatrixTask;

Worker线程 #

onmessage = ({ data: matrix }) => {
  const matrixView = new DataView(matrix.buffer);
  for (let i = 0; i < matrix.byteLength; i++) {
    matrixView.setInt8(i, i >= 255 ? 255 : i);
  }
  // 仅回传处理状态，不回传大Buffer
  postMessage({ success: true });
  // 手动解除Worker侧所有大对象引用
  matrix = null;
  matrixView = null;
};

内容的提问来源于stack exchange，提问作者Tadas Bružas