使用Web Worker结合setTimeout/setInterval引发内存泄漏问题求助

核心问题 #

你遇到的内存持续升高问题，大概率是因为主线程重复给Web Worker绑定message事件监听器，导致每次定时器触发时都会新增一个回调函数，这些未被清理的监听器会持续占用内存，最终引发内存泄漏。

具体修复步骤 #

1. 将Worker事件监听器移到定时器外部
   不要在setTimeout的回调里重复添加message监听，只需要在初始化Worker时绑定一次即可：

   // 初始化Worker
   const worker = new Worker('worker.js');
   // 只绑定一次message监听器
   worker.addEventListener('message', (e) => {
     // 处理Worker返回的消息
     console.log(e.data);
     // 触发下一次定时器
     setTimeout(runTimer, 1000);
   });
   
   function runTimer() {
     worker.postMessage('tick');
   }
   
   // 启动定时器
   runTimer();
   

2. Worker内部精简逻辑
   确保Worker里的处理逻辑不会产生未回收的对象，保持简洁：

   // worker.js
   self.addEventListener('message', () => {
     self.postMessage('定时器触发');
   });
   

3. 及时释放闲置资源
   如果定时器不再需要运行，调用worker.terminate()终止Worker，彻底释放其占用的内存资源。

验证修复效果 #

修改后通过浏览器DevTools的内存面板重新分析，堆内存占用会趋于稳定，不会再持续上升。

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