一文搞懂WebWorker

🧠 一、什么是 Web Worker？

Web Worker 是浏览器提供的一种 在后台线程中运行 JavaScript 的机制，它允许我们把一些耗时的计算从主线程中分离出来执行，从而避免 阻塞页面渲染 和 降低用户体验。

在浏览器中：

• 普通 JS 代码、DOM 操作、事件处理、渲染 等都是在 主线程（Main Thread） 中执行的；
• 而 Web Worker 运行在 独立的线程 中；
• 两者通过 消息传递（postMessage） 通信，不共享作用域，也不能直接访问 DOM。

🔧 二、怎么使用 Web Worker？

使用非常简单，主要分为三步：

✅ 1. 创建一个 Worker 文件（例如 worker.js）

1
2
3
4
5
6
7

// worker.js
self.onmessage = function (e) {
  console.log('Worker 收到消息:', e.data);
  const result = e.data * 2;
  // 向主线程发送结果
  self.postMessage(result);
};

注意：Worker 线程中没有 window 对象，用 self 代表全局上下文。

✅ 2. 在主线程中创建并使用 Worker

1
2
3
4
5
6
7
8

// main.js
const worker = new Worker('worker.js');

worker.postMessage(10); // 发送消息给 Worker

worker.onmessage = function (e) {
  console.log('主线程收到:', e.data); // 输出 20
};

✅ 3. 终止 Worker

1
2

worker.terminate(); // 主线程中终止 worker
// 或在 worker 内调用 self.close();

💡 三、使用场景

Web Worker 非常适合用于 计算密集型任务 或 长时间运行的逻辑，例如：

👉 总之：只要是“纯计算”、不涉及 DOM 的逻辑，都适合放进 Worker。

⚙️ 四、原理解析

浏览器在实现上，每个 Worker 其实是一个 独立的线程（或轻量级进程）：

• 主线程与 Worker 通过 消息队列（Message Queue） 进行通信；
• 通信方式是 拷贝传值（structured clone），不会共享内存；
• 从 Chrome 60+ 开始，也支持 SharedArrayBuffer 共享内存，实现更高效的数据传递；
• Worker 无法访问 DOM、window、document、parent；
• Worker 可以使用部分浏览器 API，如：fetch、setTimeout、XMLHttpRequest、IndexedDB。

🧩 架构示意图：

1
2
3

Main Thread  ── postMessage(data) ──▶  Worker Thread
      ▲                                     │
      └───── onmessage(event) ◀── postMessage(result)

🧰 五、扩展：Worker 的几种类型

🧩 六、简单示例：计算斐波那契数列

worker.js

1
2
3
4
5

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

main.js

1
2
3

const worker = new Worker('worker.js');
worker.postMessage(40);
worker.onmessage = (e) => console.log('结果：', e.data);

即使 fib(40) 计算很慢，也不会卡住 UI。

🧾 总结