6.3es新特性web worker

Web Worker 是 HTML5 提供的多线程技术，允许在浏览器后台创建独立线程执行 JavaScript 代码，解决主线程因耗时任务导致的 界面卡顿 问题。

核心特性

• 线程隔离 ：Worker 线程无法直接操作 DOM 或访问 window 对象
• 通信机制 ：通过 postMessage 和 onmessage 与主线程异步通信
• 生命周期：主线程可主动终止 Worker，Worker 也可自行关闭

• • Worker 脚本必须与页面同源，或通过 CORS 允许跨域加载

    // 主线程终止
    worker.terminate();

    // Worker 自行终止
    self.close();

优势​​

• ​性能提升​：将复杂计算移至后台，避免页面卡顿。
• ​并行处理​：利用多核 CPU 提升任务执行效率。
• ​稳定性​：隔离错误，防止主线程崩溃影响用户体验

实战案例

主线程代码：

// 创建 Worker 
const worker = new Worker('worker.js'); 
 
// 发送数据 
worker.postMessage({  type: 'calc', data: 10});
 
// 接收结果 
worker.onmessage  = (e) => {
  console.log(' 计算结果：', e.data); 
};
 
// 终止 Worker 
document.querySelector('#stop').onclick  = () => worker.terminate(); 

Worker 线程代码 (worker.js) ：

self.onmessage  = (e) => {
  if (e.data.type  === 'calc') {
    const result = heavyTask(e.data.data);  // 模拟耗时计算 
    self.postMessage(result); 
  }
};
 
//计算斐波那契数列
function heavyTask(n) {
  
  return n <= 1 ? n : heavyTask(n-1) + heavyTask(n-2);
  
}

应用场景

场景	案例	优势
CPU 密集型计算	大数据排序、图像处理	避免主线程阻塞
实时数据处理	音视频解码、日志分析	多线程并行处理
后台轮询任务	WebSocket 心跳检测、数据同步	资源隔离保证稳定性

兼容性

• ​主流浏览器​：Chrome、Firefox、Edge、Safari 均支持（IE 10+ 部分支持）。

• ​检测方法​ ：

  if (typeof Worker !== 'undefined') {
    // 支持 Web Worker
  } else {
    // 降级方案（如 Web Workers 无法使用时的处理）
  }

---

通过合理使用 Web Workers，开发者可将 CPU 密集型任务移至后台，显著提升页面流畅度。