17370845950

Web Workers 是浏览器提供的后台线程 API，用于执行计算或 I/O 密集型任务而不阻塞主线程；它不能操作 DOM 或访问 window/document，但支持 fetch、setTimeout 等部分 API；通过 postMessage/onmessage 与主线程通信。

JavaScript 本身是单线程的，但 Web Workers 提供了一种在后台线程中运行脚本的机制，让耗时任务不阻塞主线程，从而保持页面响应流畅。

Web Workers 是什么？

Web Workers 是浏览器提供的 API，允许你在独立于主线程的后台线程中执行 JavaScript。它不能直接操作 DOM，也不能访问 window、document 等全局对象，但可以使用 fetch、setTimeout、WebSockets、IndexedDB 等部分 Web API。

它的核心价值在于：把计算密集型或 I/O 密集型任务（比如图像处理、大数据解析、加密解密）移到后台线程，避免卡住 UI。

如何创建和使用 Worker？

创建一个 Worker 很简单，分三步：

• 写一个单独的 JS 文件（例如 worker.js），里面放要后台执行的逻辑
• 在主脚本中用 new Worker('worker.js') 实例化一个 Worker 对象
• 通过 postMessage() 和 onmessage 在主线程与 Worker 之间传递数据

注意：Worker 中的 this 指向的是 WorkerGlobalScope，不是 window；所以要用 self.postMessage 发送消息，用 self.onmessage 接收。

一个简单例子：计算斐波那契数列

假设你想算第 40 项斐波那契数，直接在主线程算会卡顿几秒。用 Worker 就能避免：

worker.js：

self.onmessage = function(e) {
  const n = e.data;
  function fib(n) { return n <= 1 ? n : fib(n-1) + fib(n-2); }
  self.postMessage(fib(n));
};

main.js：

const worker = new Worker('worker.js');
worker.postMessage(40);
worker.onmessage = function(e) {
  console.log('结果：', e.data); // 不会阻塞页面
};

Worker 的类型与适用场景

主要有三种 Worker：

• Dedicated Worker ：一对一绑定，最常用，适合长期运行的独立任务
• Shared Worker ：多个页面/iframe 可共享同一个 Worker，适合跨 tab 协作（如实时同步状态）
• Service Worker ：用于拦截网络请求、实现离线缓存和推送，本质是特殊的事件驱动 Worker

日常开发中，Dedicated Worker 覆盖大多数多线程需求；Shared Worker 使用较少，需注意跨源限制；Service Worker 更偏向 PWA 场景，不属于传统“多线程计算”范畴。