6.3es新特性web worker

chxii2025-04-11 10:16

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