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 密集型任务移至后台，显著提升页面流畅度。