WebWorker引发内存占用激增，请求排查内存泄漏问题

核心问题分析 #

1. Worker资源未全面回收（内存/CPU泄漏主因） #

• 仅在Worker返回非200结果时调用worker.terminate()，但如果Worker在发送200响应后出现报错、卡死或未返回后续结果，该Worker会长期存活，持续占用CPU和内存。
• 未监听Worker的错误事件（onerror/onmessageerror），一旦Worker运行异常，没有任何终止和清理逻辑，导致僵尸Worker累积。
• Promise仅在成功分支触发resolve，异常场景下Promise会永久处于pending状态，绑定的Worker引用无法被GC回收。

2. 全局变量与数组无限制累积 #

• postMessageRes未用let/const声明，成为全局变量，长期占用内存（虽每次会覆盖，但大数据场景下旧数据回收不及时）。
• positions和colors数组持续push数据无清理逻辑，处理大量任务后会膨胀到GB级，直接导致内存占用飙升。

3. 并发控制逻辑不严谨 #

• 依赖全局workerCount计数判断是否清理promises数组，多Worker同时返回时会出现计数混乱，导致promises数组残留大量未清理的Promise引用。
• 调用代码中的await syncThread()逻辑不明确，若未正确等待当前批次所有Worker完成，会导致Worker无限制创建，加剧资源占用。

修复方案 #

1. 完善Worker生命周期管理 #

给Worker添加完整的错误监听和清理逻辑，确保任何场景下都能终止Worker并释放资源：

const MAX_WORKERS = 26;

function createWorker(data1, data2) {
  return new Promise((resolve, reject) => {
    // 注意：这里需补充Worker脚本路径，原代码new Worker()存在语法问题
    const worker = new Worker('./your-worker-script.js');
    
    // 统一清理函数：终止Worker并移除事件监听，避免内存泄漏
    const cleanup = () => {
      worker.terminate();
      worker.onmessage = null;
      worker.onerror = null;
      worker.onmessageerror = null;
    };

    worker.onmessage = (event) => {
      const postMessageRes = event.data; // 改为局部变量
      if (postMessageRes === 200) {
        worker.postMessage([
          nodePagesString,
          pagesString,
          copcString,
          data1,
          data2,
          [x_min, y_min, z_min, widthx, widthy, widthz, ...scaleFactor]
        ]);
      } else {
        workerCount += 1;
        const [position, color] = postMessageRes;
        const localPosition = [];
        const localColor = [];
        
        for (let i = 0; i < position.length; i++) {
          positions.push(position[i]);
          localPosition.push(position[i]);
          colors.push(color[i]);
          localColor.push(color[i]);
        }
        
        cleanup();
        resolve([localPosition, localColor, data1]);
      }
    };

    // 监听Worker错误，异常时终止并reject Promise
    worker.onerror = (error) => {
      console.error('Worker运行错误:', error);
      cleanup();
      reject(error);
    };

    // 监听消息格式错误，同样清理资源
    worker.onmessageerror = (error) => {
      console.error('Worker消息格式错误:', error);
      cleanup();
      reject(error);
    };
  });
}

2. 优化并发控制逻辑 #

改用Promise.all替代全局计数，确保批次任务完成后再继续创建新Worker：

// 调用代码重构
async function processAllTasks() {
  let doneCount = 0;
  const totalNodes = keyCountMap.length / 2; // 按原逻辑推导，每次取两个元素
  const clock = { getDelta: () => performance.now() }; // 示例时钟对象

  for (let m = 0; m < keyCountMap.length; ) {
    const remaining = totalNodes - doneCount;
    const numbWorker = Math.min(MAX_WORKERS, remaining);
    const batchPromises = [];

    for (let i = 0; i < numbWorker; i++) {
      batchPromises.push(createWorker(keyCountMap[m], keyCountMap[m + 1]));
      doneCount++;
      m += 2;
    }

    // 等待当前批次所有Worker完成，再处理下一批
    await Promise.all(batchPromises);
  }

  console.log('任务完成耗时:', clock.getDelta());
}

3. 解决数组累积问题 #

• 如果positions和colors不需要长期保存，处理完一批任务后及时清空：

  // 在批次任务完成后添加清理逻辑
  await Promise.all(batchPromises);
  positions = [];
  colors = [];
  

• 如果需要长期存储，改用TypedArray（如Float32Array）替代普通数组，大幅降低内存占用。

4. 检查Worker脚本内部逻辑 #

确认Worker脚本中是否存在内存泄漏：

• 避免在Worker中使用全局变量累积数据
• 处理完任务后及时清理临时变量
• 避免无限循环或未终止的异步任务

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