html5的web worker是运行在后台的JavaScript线程，它独立于主线程运行，不会干扰页面的正常渲染和用户操作，非常适合处理大量计算、数据解析等耗时任务。传统JavaScript单线程模式下，耗时任务会阻塞主线程，导致页面出现无响应的情况，而web worker的出现很好地解决了这个问题。
web worker的核心特点
- 运行在独立后台线程，不阻塞主线程的UI更新和用户交互
- 无法直接操作DOM，只能通过消息机制和主线程通信
- 同源限制，worker脚本必须和主页面同源
- 可以加载额外的脚本，支持importScripts方法
web worker的基础使用步骤
1. 创建worker线程
主线程中通过Worker构造函数创建worker实例，传入worker脚本的路径。注意worker脚本需要和主页面同源，否则会抛出错误。
// 主线程代码 main.js
// 创建worker实例，传入worker脚本路径
const myWorker = new Worker('worker.js');
// 向worker线程发送消息
myWorker.postMessage('开始执行计算任务');
// 接收worker线程返回的消息
myWorker.onmessage = function(event) {
console.log('收到worker返回的结果：', event.data);
};
// 处理worker线程的错误
myWorker.onerror = function(error) {
console.error('worker线程发生错误：', error.message);
};
2. 编写worker线程脚本
worker脚本运行在独立线程中，不能直接访问主线程的DOM和全局变量，只能通过postMessage发送消息，通过onmessage监听主线程的消息。
// worker线程脚本 worker.js
// 监听主线程发送的消息
onmessage = function(event) {
console.log('收到主线程消息：', event.data);
// 模拟耗时计算任务
let total = 0;
for (let i = 0; i < 100000000; i++) {
total += i;
}
// 将计算结果发送回主线程
postMessage(total);
};
// 可以加载其他同源脚本
// importScripts('helper.js');
3. 终止worker线程
当worker任务执行完成后，可以在主线程调用terminate方法终止worker，释放线程资源。worker线程内部也可以调用close方法自行关闭。
// 主线程终止worker myWorker.terminate(); // worker线程内部自行关闭 // close();
主线程和worker的双向通信示例
下面通过一个计算斐波那契数列的例子，展示主线程和worker的双向通信过程。主线程输入计算的项数，worker线程执行计算后返回结果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>web worker计算示例</title>
</head>
<body>
<input type="number" id="numInput" placeholder="输入计算项数">
<button id="calcBtn">开始计算</button>
<p>计算结果：<span id="result"></span></p>
<script>
const calcBtn = document.getElementById('calcBtn');
const numInput = document.getElementById('numInput');
const resultSpan = document.getElementById('result');
// 创建worker
const worker = new Worker('fib-worker.js');
// 点击按钮发送计算请求
calcBtn.addEventListener('click', () => {
const num = parseInt(numInput.value);
if (isNaN(num) || num <= 0) {
alert('请输入有效的正整数');
return;
}
resultSpan.textContent = '计算中...';
worker.postMessage(num);
});
// 接收worker返回的结果
worker.onmessage = (event) => {
resultSpan.textContent = event.data;
};
// 处理worker错误
worker.onerror = (error) => {
console.error('计算错误：', error.message);
resultSpan.textContent = '计算出错';
};
</script>
</body>
</html>
对应的worker脚本fib-worker.js如下：
// 斐波那契数列计算函数
function fibonacci(n) {
if (n <= 1) return n;
let a = 0, b = 1;
for (let i = 2; i <= n; i++) {
[a, b] = [b, a + b];
}
return b;
}
// 监听主线程消息
onmessage = (event) => {
const num = event.data;
const result = fibonacci(num);
postMessage(result);
};
使用web worker的注意事项
- worker线程无法访问
window、document等DOM相关对象，也不能操作DOM - worker脚本必须同源，跨域脚本无法被加载为worker
- 数据传输默认是拷贝传递，大量数据传递建议使用
Transferable Objects减少开销 - 不是所有场景都适合用worker，简单任务使用worker反而会增加线程通信的开销
- worker线程中不能使用
alert、confirm等会阻塞线程的方法
适用场景总结
web worker适合以下场景：大量数据计算、大文件解析、实时数据预处理、复杂算法执行等耗时任务。对于简单的DOM操作、短时间的同步任务，不需要使用web worker，避免不必要的性能损耗。
Web_WorkerHTML5后台线程JavaScript修改时间：2026-06-28 11:36:31