在浏览器环境中，JavaScript主线程负责渲染页面、处理用户交互和执行脚本。如果遇到大量计算或密集任务，主线程会被占用，导致页面失去响应。Web Workers允许我们把这类任务放到独立的后台线程中运行，从而保持界面流畅。
什么是Web Workers
Web Workers是HTML5提供的API，能在独立于主线程的上下文中执行JavaScript代码。主线程与Worker之间通过消息机制通信，彼此不直接共享内存（除非使用SharedArrayBuffer）。常见的Worker类型包括专用Worker、共享Worker和服务Worker，本文以专用Worker为例。
创建并使用专用Worker
要使用Worker，需要先编写一个独立的JS文件，再在主线程中实例化。下面演示主线程如何创建Worker并发送消息。
// main.js 主线程代码
const worker = new Worker('worker.js');
// 向Worker发送数据
worker.postMessage({ type: 'start', num: 1000000 });
// 接收Worker返回的结果
worker.onmessage = function (e) {
console.log('主线程收到结果:', e.data);
};
// 处理Worker错误
worker.onerror = function (err) {
console.error('Worker出错:', err.message);
};
对应的Worker脚本文件如下，它接收主线程指令并进行简单累加计算。
// worker.js Worker线程代码
onmessage = function (e) {
const { type, num } = e.data;
if (type === 'start') {
let sum = 0;
for (let i = 0; i < num; i++) {
sum += i;
}
// 将计算结果回传给主线程
postMessage(sum);
}
};
线程间通信机制
主线程和Worker都通过postMessage()发送数据，通过onmessage事件接收数据。传递的数据会被结构化克隆，而非共享引用。若需传输大块二进制数据，可使用Transferable对象避免复制开销。
终止Worker
当任务完成或页面关闭时，应主动终止Worker以释放资源：
- 在主线程调用
worker.terminate()立即结束 - 在Worker内部调用
close()自行关闭
适用场景与限制
Web Workers适合执行CPU密集型任务，例如图片处理、大数据排序、加密计算等。但Worker中不能操作DOM，也无法使用部分窗口对象如window和document。以下为常见能力对比：
| 能力 | 主线程 | Worker线程 |
|---|---|---|
| 操作DOM | 支持 | 不支持 |
| 发起网络请求 | 支持 | 支持 |
| 访问localStorage | 支持 | 不支持 |
小结
通过Web Workers，JavaScript开发者可以在不阻塞用户界面的情况下完成繁重任务。合理划分主线程与Worker的职责，能显著提升Web应用的性能和可用性。
Web_WorkersJavaScript多线程修改时间：2026-07-29 09:45:27