javascript本身采用单线程模型，所有任务都运行在主线程中，当遇到大量计算、数据解析等耗时操作时，会阻塞主线程导致页面卡顿、交互无响应。Web Workers就是为解决这类问题诞生的技术，它可以在独立于主线程的后台线程中运行javascript脚本，避免耗时任务影响页面正常使用。
Web Workers的核心概念
Web Workers创建的后台线程被称为Worker线程，它和主线程有以下核心特性：
- Worker线程完全独立于主线程，不会共享内存，两者只能通过消息传递通信
- Worker线程无法直接操作DOM，也不能使用window对象的绝大多数属性和方法，只能使用部分独立的API，比如定时器、fetch、IndexedDB等
- Worker线程的运行不会阻塞主线程的渲染和用户交互，适合处理耗时计算、大数据处理等任务
主线程与Worker线程的通信机制
主线程和Worker线程通过postMessage方法发送消息，通过onmessage事件监听接收消息，数据传递默认采用结构化克隆算法，传递的是数据的副本，不会修改原始数据。
实现Web Workers多线程编程的完整步骤
1. 创建Worker线程文件
首先需要单独创建一个javascript文件作为Worker线程的执行脚本，这里我们创建worker.js文件，内容如下：
// worker.js Worker线程执行脚本
// 监听主线程发送的消息
self.onmessage = function(e) {
const { num } = e.data;
console.log('Worker线程收到主线程数据:', num);
// 模拟耗时计算：计算从1到num的累加和
let sum = 0;
for (let i = 1; i <= num; i++) {
sum += i;
}
// 将计算结果发送回主线程
self.postMessage({ result: sum, from: 'Worker线程' });
};
// 监听Worker线程内部错误
self.onerror = function(err) {
console.error('Worker线程发生错误:', err.message);
};
2. 主线程中创建Worker并通信
在主页面的javascript代码中，通过Worker构造函数创建Worker实例，指定Worker脚本的路径，然后实现消息的发送和接收：
// 主线程代码
// 创建Worker实例，传入Worker脚本路径
const myWorker = new Worker('./worker.js');
// 向Worker线程发送消息
const calcNum = 10000000;
myWorker.postMessage({ num: calcNum });
console.log('主线程向Worker发送计算参数:', calcNum);
// 监听Worker线程返回的消息
myWorker.onmessage = function(e) {
const { result, from } = e.data;
console.log(`${from}返回计算结果: 1到${calcNum}的累加和为${result}`);
// 计算完成后可以终止Worker线程
myWorker.terminate();
};
// 监听Worker线程错误
myWorker.onerror = function(err) {
console.error('主线程捕获到Worker错误:', err.message);
};
3. 传递复杂数据的注意事项
当需要传递大量数据或者复杂对象时，可以使用Transferable Objects转移数据的所有权，避免结构化克隆带来的性能开销，比如传递ArrayBuffer的时候：
// 主线程发送可转移对象
const buffer = new ArrayBuffer(1024);
const worker = new Worker('./worker.js');
// 第二个参数传入要转移的对象数组，转移后主线程无法再使用该buffer
worker.postMessage(buffer, [buffer]);
// Worker线程中接收
self.onmessage = function(e) {
const buffer = e.data;
console.log('Worker收到ArrayBuffer长度:', buffer.byteLength);
// 处理完成后可以将所有权转回主线程
self.postMessage(buffer, [buffer]);
};
Web Workers的使用限制
使用Web Workers时需要注意以下限制：
- Worker脚本的加载受同源策略限制，不能加载跨域的脚本，除非服务器设置了正确的CORS头
- Worker线程中不能使用
alert、confirm等会阻塞线程的方法，也不能操作DOM元素 - 不是所有浏览器都支持Web Workers，使用前可以通过
if (window.Worker) {}做兼容性判断
| 场景 | 是否适合使用Web Workers | 原因 |
|---|---|---|
| 大量数据排序、加密计算 | 适合 | 属于纯计算任务，不会操作DOM，不会阻塞主线程 |
| 实时更新页面DOM元素 | 不适合 | Worker无法操作DOM，需要主线程处理 |
| 定时请求接口更新数据 | 适合 | Worker可以使用fetch请求接口，处理完数据再通知主线程 |
终止Worker线程的方法
当Worker线程的任务完成后，或者页面不需要再使用Worker时，可以主动终止线程释放资源：
- 主线程调用
worker.terminate()，会立即终止Worker线程，Worker线程中的任务会直接停止 - Worker线程内部可以调用
self.close()主动关闭自身
注意：一旦Worker线程被终止，就无法再重新启动，如果需要再次执行任务，需要重新创建Worker实例。
javascriptWeb_Workers多线程编程主线程Worker线程修改时间：2026-07-01 03:24:30