在 Web 开发中，JavaScript 是单线程执行的。这意味着如果有耗时操作（如复杂计算或数据处理），会阻塞 UI 渲染，导致页面卡顿。为了解决这一问题，HTML5 引入了 Web Worker，使我们能够在后台线程中执行任务，避免主线程阻塞。
本文将深入介绍 Web Worker 的概念、使用方法和注意事项，并配有示例代码，帮助你更好地理解和使用 Web Worker。
1. 什么是 Web Worker？
Web Worker 是一种运行在浏览器主线程之外的 JavaScript，允许执行耗时任务而不会阻塞主线程（即 UI 线程）。
1.1 特点
- 多线程执行：在浏览器中实现真正的并行处理。
- 异步通信 ：通过
postMessage方法在主线程和 Worker 之间进行通信。 - 独立环境 ：Worker 不能直接访问 DOM、
window、document等主线程对象。
2. 创建 Web Worker
2.1 基本示例
文件结构
css
├── index.html
├── main.js
└── worker.js2.2 主线程代码（main.js）
javascript
// 创建 Worker
const worker = new Worker('worker.js');
// 监听来自 Worker 的消息
worker.onmessage = (event) => {
console.log('来自 Worker 的消息:', event.data);
};
// 向 Worker 发送消息
worker.postMessage({ num: 10 });
console.log('主线程继续执行');2.3 Worker 线程代码（worker.js）
scss
// 监听来自主线程的消息
onmessage = (event) => {
const { num } = event.data;
const result = fibonacci(num);
postMessage(result);
};
// 计算斐波那契数列
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}2.4 运行效果
在浏览器控制台输出：
主线程继续执行
来自 Worker 的消息: 55可以看到 Worker 在后台执行计算，不会阻塞主线程。
3. 使用 Blob 动态创建 Worker
除了使用外部脚本文件创建 Worker，还可以使用 Blob 对象动态创建 Worker。
3.1 示例代码
ini
// 定义 Worker 代码
const workerCode = `
onmessage = (e) => {
postMessage(e.data * 2);
};
`;
// 创建 Blob 对象
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
// 监听消息
worker.onmessage = (e) => console.log('结果:', e.data);
// 发送数据
worker.postMessage(5);4. 终止和错误处理
4.1 终止 Worker
- 主线程终止 Worker ：使用
worker.terminate()方法。
arduino
const worker = new Worker('worker.js');
worker.terminate(); // 立即终止 Worker4.2 错误处理
可以通过 onerror 监听 Worker 中的错误。
ini
const worker = new Worker('worker.js');
worker.onerror = (error) => {
console.error('Worker 错误:', error);
};5. 使用 SharedWorker 实现多页面共享
SharedWorker 允许多个浏览器上下文（如 iframe、标签页）共享一个 Worker。
5.1 文件结构
css
├── index.html
├── page2.html
├── shared-worker.js
└── main.js5.2 shared-worker.js
ini
// 共享 Worker，支持多页面通信
onconnect = (e) => {
const port = e.ports[0];
console.log('SharedWorker 已连接');
port.onmessage = (event) => {
console.log('收到消息:', event.data);
// 广播消息给所有连接的客户端
ports.forEach((p) => {
if (p !== port) {
p.postMessage(`来自其他页面的消息: ${event.data}`);
}
});
};
port.postMessage('SharedWorker 连接成功');
ports.push(port);
};
const ports = [];5.3 main.js
javascript
// 创建 SharedWorker
const worker = new SharedWorker('shared-worker.js');
worker.port.start();
// 接收来自 Worker 的消息
worker.port.onmessage = (event) => {
console.log('来自 SharedWorker 的消息:', event.data);
};
// 向 Worker 发送消息
worker.port.postMessage('你好，SharedWorker');5.4 index.html
xml
<!DOCTYPE html>
<html lang="en">
<head>
<title>SharedWorker 示例</title>
</head>
<body>
<h1>SharedWorker - 页面 1</h1>
<script src="main.js"></script>
</body>
</html>5.5 page2.html
xml
<!DOCTYPE html>
<html lang="en">
<head>
<title>SharedWorker 示例 - 页面 2</title>
</head>
<body>
<h1>SharedWorker - 页面 2</h1>
<script src="main.js"></script>
</body>
</html>5.6 运行效果
- 打开
index.html和page2.html，它们将共享同一个SharedWorker实例。 - 在任一页面发送消息，另一页面可以接收广播。
6. Web Worker 的限制
- 无法操作 DOM ：不能直接访问
document、window。 - 同源策略：只能加载与页面同源的脚本。
- 数据传输 ：复杂对象需要通过
postMessage序列化传输。
7. 适用场景
- 密集计算：如加密、解压缩、复杂算法。
- 大数据处理：如实时日志分析、图像处理。
- 后台任务：如预加载、自动保存。
8. 总结
Web Worker 是浏览器中处理耗时任务的有效工具，合理使用可以提升页面响应速度和用户体验。本文介绍了 Web Worker 的基本概念、实现方式、错误处理和共享 Worker，掌握这些知识将有助于你在实际项目中更好地利用 Web Worker。