使用Web Workers与createImageBitmap时Chrome崩溃问题求助

我之前碰到过完全一样的情况——当Web Worker正在执行createImageBitmap这类涉及浏览器底层图形资源处理的操作时，直接调用worker.terminate()会触发Chrome的进程崩溃，这是因为强制终止Worker会打断浏览器内部的资源清理流程，导致资源泄漏或进程冲突。

问题根源 #

你的closeWorker函数直接调用了worker.terminate()，但此时Worker可能正处于createImageBitmap的异步处理过程中。这个API和浏览器的GPU资源绑定较深，强制终止会让浏览器无法正常回收这些资源，进而引发崩溃。

优雅的解决方案：用信号机制替代强制终止 #

不要直接终止Worker，而是通过取消信号让Worker自行停止任务、清理资源后主动关闭，具体步骤如下：

1. 主线程发送取消信号
   使用AbortController创建可中断的信号，传递给Worker，取消时调用abort()而非terminate()：

   let abortController;
   let workerInstance;
   
   function startImageProcessing() {
     abortController = new AbortController();
     workerInstance = new Worker('image-processor.js');
     // 传递信号，注意转移控制权
     workerInstance.postMessage(
       { type: 'batchLoad', imageUrls: yourImageUrls, signal: abortController.signal },
       [abortController.signal]
     );
     // 监听Worker的消息或关闭事件
   }
   
   function closeWorker() {
     if (abortController) {
       // 发送取消信号
       abortController.abort('用户主动取消请求');
     }
     // 可以等待Worker主动关闭后清理实例引用
     workerInstance?.addEventListener('close', () => {
       workerInstance = null;
     });
   }
   

2. Worker内部响应取消并中断任务
   在Worker中监听信号的abort事件，停止任务队列，并使用信号中断fetch和createImageBitmap操作：

   let taskQueue = [];
   
   self.addEventListener('message', async (e) => {
     if (e.data.type === 'batchLoad') {
       const { imageUrls, signal } = e.data;
       taskQueue = [...imageUrls];
   
       // 监听取消信号
       signal.addEventListener('abort', () => {
         taskQueue = []; // 清空任务队列
       });
   
       for (const url of taskQueue) {
         // 检查是否已取消，提前退出循环
         if (signal.aborted) break;
         try {
           // 用信号中断fetch请求
           const response = await fetch(url, { signal });
           const blob = await response.blob();
           // 用信号中断createImageBitmap
           const bitmap = await createImageBitmap(blob, { signal });
           // 发送处理完成的Bitmap到主线程
           self.postMessage({ type: 'bitmapReady', bitmap }, [bitmap]);
         } catch (err) {
           // 忽略取消错误，处理其他异常
           if (err.name !== 'AbortError') {
             console.error(`加载图片${url}失败:`, err);
           }
         }
       }
   
       // 任务完成或取消后，主动关闭Worker
       self.close();
     }
   });
   

额外说明 #

• 这种优雅取消的方式不仅能避免Chrome崩溃，还能让Worker有机会清理已加载的资源，更符合Web Workers的设计规范。
• Chrome的这个崩溃问题在部分新版本中已有修复，但采用信号中断的方式仍然是跨浏览器的安全实践。

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