HTML5 Web Workers允许我们在浏览器后台运行JavaScript脚本，这些脚本不会干扰主线程的UI渲染和用户交互，非常适合处理大量计算、数据解析等耗时任务。它和主线程之间通过消息机制通信，彼此无法直接操作对方的DOM或变量。
Web Workers基础使用步骤
1. 创建Worker线程
主线程中通过Worker构造函数创建Worker实例，参数指向Worker脚本的路径，注意Worker脚本必须和主页面同源，或者通过Blob URL创建内联Worker。
// 主线程代码 main.js
// 创建Worker，指向同目录下的worker脚本
const myWorker = new Worker('worker.js');
// 也可以创建内联Worker，避免单独写脚本文件
const workerBlob = new Blob(['self.onmessage = function(e) { postMessage(e.data * 2); }'], { type: 'application/javascript' });
const inlineWorker = new Worker(URL.createObjectURL(workerBlob));
2. Worker线程内部逻辑
Worker脚本运行在独立环境中，没有window对象，只有self代表自身上下文，通过onmessage监听主线程发来的消息，用postMessage向主线程发送结果。
// worker.js Worker线程脚本
self.onmessage = function(event) {
// 接收主线程传来的数据
const num = event.data;
// 模拟耗时计算
let result = 0;
for (let i = 0; i < 1000000000; i++) {
result += i;
}
// 把计算结果发回主线程
self.postMessage({
originData: num,
calculateResult: result
});
};
3. 主线程与Worker通信
主线程通过postMessage向Worker发送数据，通过onmessage监听Worker返回的消息，还可以用onerror捕获Worker运行时的错误。
// 主线程代码 main.js
// 向Worker发送数据
myWorker.postMessage(10);
// 监听Worker返回的消息
myWorker.onmessage = function(event) {
console.log('收到Worker返回的结果：', event.data);
};
// 监听Worker错误
myWorker.onerror = function(error) {
console.error('Worker运行出错：', error.message);
};
4. 关闭Worker线程
Worker使用完成后需要手动关闭，避免占用资源。主线程可以调用terminate方法关闭Worker，Worker内部也可以调用close方法自我关闭。
// 主线程关闭Worker myWorker.terminate(); // Worker内部自我关闭，在worker.js中添加 // self.close();
Web Workers使用限制
- Worker无法访问DOM，不能直接操作页面元素
- Worker和主线程不共享内存，数据传递是复制传递，大量数据传递会有性能损耗，可使用
Transferable Objects优化 - Worker脚本的路径必须符合同源策略，或者采用内联Blob方式创建
- 部分浏览器不支持
Worker，使用前可以做兼容性判断
// 兼容性判断
if (typeof Worker !== 'undefined') {
console.log('当前浏览器支持Web Workers');
} else {
console.log('当前浏览器不支持Web Workers');
}
完整实例：主线程计算与Worker计算对比
下面的实例对比了在主线程执行耗时计算和用Worker执行耗时计算的区别，主线程计算会阻塞页面交互，Worker计算则不会影响页面。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Web Workers实例</title>
</head>
<body>
<button id="mainBtn">主线程执行计算</button>
<button id="workerBtn">Worker执行计算</button>
<div id="result"></div>
<input type="text" placeholder="输入内容测试页面是否卡顿">
<script>
const mainBtn = document.getElementById('mainBtn');
const workerBtn = document.getElementById('workerBtn');
const resultDiv = document.getElementById('result');
// 主线程计算
mainBtn.addEventListener('click', function() {
resultDiv.textContent = '主线程计算中，页面会卡顿...';
let sum = 0;
for (let i = 0; i < 2000000000; i++) {
sum += i;
}
resultDiv.textContent = '主线程计算结果：' + sum;
});
// Worker计算
workerBtn.addEventListener('click', function() {
if (typeof Worker === 'undefined') {
resultDiv.textContent = '浏览器不支持Web Workers';
return;
}
resultDiv.textContent = 'Worker计算中，页面可以正常操作...';
const worker = new Worker(URL.createObjectURL(new Blob([`
self.onmessage = function(e) {
let sum = 0;
for (let i = 0; i < 2000000000; i++) {
sum += i;
}
self.postMessage(sum);
}
`], { type: 'application/javascript' })));
worker.onmessage = function(e) {
resultDiv.textContent = 'Worker计算结果：' + e.data;
worker.terminate();
};
});
</script>
</body>
</html>
HTML5_Web_Workers后台线程JavaScript多线程修改时间：2026-06-13 14:15:21