如果你也曾经在前端写循环写到浏览器卡死，那你一定需要了解一下 Web Worker！
本文将带你从零入门，循序渐进地掌握 Web Worker，让你真正理解“前端多线程”是怎么回事。

---

一、为什么需要 Web Worker？

JavaScript 是单线程语言，也就是说同一时间只能执行一个任务。
比如当你写了一个很耗时的循环计算时，页面就可能“卡死”或“无响应”。

// 模拟一个耗时任务
for (let i = 0; i < 1e9; i++) {}
console.log('执行完毕'); 

此时浏览器界面会直接卡住，连输入框都打不动。

原因：JS 在主线程上执行，主线程还要负责渲染界面，当 JS 长时间执行，UI 渲染就被阻塞了。

一、Web Worker 是什么？

Web Worker 是一种让 JavaScript 在后台线程运行的机制。

换句话说，它能让你在另一个线程里执行 JS 代码，不会阻塞主线程。

官方定义参考：

MDN Web Docs - Web Workers

W3C 规范 - Web Workers

三、最简单的例子：创建一个 Worker

1️⃣ 主线程（main.js）

// 创建 worker 实例
const worker = new Worker('worker.js');

// 向 worker 发送消息
worker.postMessage(1000000000);

// 监听 worker 的返回结果
worker.onmessage = (e) => {
  console.log('结果：', e.data);
};

2️⃣ 子线程（worker.js）

// 监听主线程的消息
onmessage = function(e) {
  let total = 0;
  for (let i = 0; i < e.data; i++) {
    total += i;
  }
  // 把结果返回给主线程
  postMessage(total);
};

这样一来，大计算任务在 worker 中执行，页面完全不会卡顿

四、Worker 的通信机制

Web Worker 与主线程通过消息机制通信（postMessage / onmessage）。

• 数据传递是“复制”而不是“共享”，所以不会出现线程安全问题。

• 如果传递的数据很大，可以使用 Transferable Objects 来“转移所有权”，避免性能损耗。

举个例子：

// 使用 Transferable 对象传输 ArrayBuffer
const buffer = new ArrayBuffer(8);
worker.postMessage(buffer, [buffer]);

五、Worker 的限制

Worker 功能强大，但也有一些限制：

限制	说明
❌ 无法访问 DOM	Worker 不能直接操作文档结构
❌ 无法使用 window 对象	只能访问 self（Worker 全局作用域）
❌ 只能通过文件加载	不能直接执行内联脚本
⚠️ 同源策略	worker.js 必须与主线程文件同源

六、高级用法：多个 Worker 协作

如果一个任务还太大，可以用多个 worker 来并行计算：

const workerCount = 4;
let completed = 0;
let result = 0;

for (let i = 0; i < workerCount; i++) {
  const worker = new Worker('worker.js');
  worker.postMessage({ start: i * 250000000, end: (i + 1) * 250000000 });

  worker.onmessage = (e) => {
    result += e.data;
    completed++;
    if (completed === workerCount) {
      console.log('最终结果：', result);
    }
  };
}

在 worker.js：

onmessage = (e) => {
  const { start, end } = e.data;
  let sum = 0;
  for (let i = start; i < end; i++) sum += i;
  postMessage(sum);
};

这种方式能充分利用多核 CPU 性能！

七、Worker 的几种类型

类型	说明	场景
Dedicated Worker	专用 Worker，一个页面使用	一般计算任务
Shared Worker	可被多个页面共享	多页面通信
Service Worker	能拦截网络请求、做缓存、离线处理	PWA、离线网页、消息推送

延伸阅读：

MDN - SharedWorker

MDN - ServiceWorker

八、实战：用 Web Worker 做图片压缩

// main.js
const worker = new Worker('compress.js');
worker.postMessage(file);
worker.onmessage = (e) => {
  download(e.data);
};

// compress.js
importScripts('https://cdn.jsdelivr.net/npm/browser-image-compression/dist/browser-image-compression.js');

onmessage = async (e) => {
  const compressed = await imageCompression(e.data, { maxSizeMB: 0.5 });
  postMessage(compressed);
};

✅ 页面不卡顿
✅ 压缩效率高
✅ 支持大文件

九、调试与性能优化

1. 使用 Chrome DevTools 的 Sources → Workers 面板 查看线程状态
2. 任务分片（chunk）避免单次计算过大
3. 利用 OffscreenCanvas 在 Worker 中绘图

十、总结

关键词	说明
多线程	Web Worker 让 JS 拥有后台线程能力
消息通信	用 postMessage 进行主线程交互
限制	不能操作 DOM，但能处理重计算
场景	图片处理、数据加密、AI 推理、复杂数学计算

延伸阅读推荐：

MDN: Web Workers API

Web.dev: Using Web Workers

Service Worker 实战入门指南