17370845950

Web Workers 是浏览器提供的后台线程机制，实现 JavaScript 多线程运行以避免阻塞主线程；它与主线程隔离，仅通过 postMessage 通信，支持 Dedicated 和 Shared 两种类型，适用于耗时计算等场景。

Web Workers 是浏览器提供的、让 JavaScript 在后台线程中运行的机制，它能真正实现多线程执行，避免阻塞主线程（即 UI 渲染和用户交互线程）。

Web Workers 的核心作用

JavaScript 本身是单线程的，所有任务（脚本执行、DOM 操作、事件响应等）都在同一个线程上排队运行。一旦遇到耗时计算（比如大数组排序、图像处理、加密解密），页面就会卡顿甚至无响应。Web Workers 把这些重任务“搬”到独立的后台线程里，主线程继续流畅工作。

关键点：Worker 线程与主线程完全隔离，不能访问 DOM、window、document 等全局对象，也不能直接修改页面；通信只能通过 消息机制（postMessage + onmessage） 进行。

如何创建并使用一个 Web Worker

分三步：写 Worker 脚本 → 创建 Worker 实例 → 双向通信

• 1. 编写 Worker 文件（例如 worker.js）：
  在该文件中，可用 self 或 this 表示当前 Worker 全局对象；监听主线程发来的消息，并返回结果：
  

  self.onmessage = function(e) {
    const data = e.data;
    const result = data * data; // 示例：简单计算
    self.postMessage({ result });
  };

• 2. 主线程中启动 Worker：
  

  const worker = new Worker('worker.js');
  worker.postMessage(5); // 发送数字 5 给 Worker

• 3. 主线程监听 Worker 返回结果：
  

  worker.onmessage = function(e) {
    console.log('Worker 返回：', e.data.result); // 输出 25
  };

常见类型与适用场景

目前主流支持两种 Worker：

• Dedicated Worker（专用 Worker）：最常用，一对一绑定，仅被创建它的脚本访问。适合单个复杂计算、数据预处理、轮询后台接口等。
• Shared Worker（共享 Worker）：多个页面/iframe 可共用同一个 Worker 实例（需同源），通过 port 通信。适合跨标签页共享状态或统一管理长连接。

注意：Service Worker 虽也属 Worker 类型，但定位不同——它是为离线缓存、网络代理设计的，不用于通用计算任务。

注意事项与限制

• Worker 脚本必须托管在 HTTP/HTTPS 协议下（file:// 协议会失败）
• 无法使用 alert、confirm、prompt，也不能操作 DOM
• Worker 内部可使用 fetch、setTimeout、WebSockets、JSON、ArrayBuffer 等，但不可用 localStorage（可用 IndexedDB）
• 记得调用 worker.terminate() 手动销毁不用的 Worker，避免内存泄漏
• 调试时可在 Chrome DevTools 的 “Application → Service Workers” 或 “Sources → Workers” 标签下查看运行中的 Worker