Web Worker是HTML5的多线程API，允许JS在后台线程运行耗时任务，避免阻塞UI。通过postMessage通信，不共享DOM或window对象。创建专用Worker可处理计算密集型任务，如斐波那契数列；使用Blob URL可内联代码减少文件依赖。注意数据复制开销、同源限制及及时终止线程，以优化性能和资源管理。
JavaScript 是单线程语言，主线程负责页面渲染、事件处理、脚本执行等任务。当遇到大量计算时，页面容易卡顿甚至无响应。为解决这个问题，浏览器提供了 Web Workers，让 JS 能在后台线程中运行耗时任务，不阻塞 UI。本文带你实战 Worker 线程的使用方法和注意事项。
什么是 Web Worker？
Web Worker 是 HTML5 提供的多线程 API，允许 JavaScript 在独立于主线程的后台线程中运行脚本。它不能操作 DOM，也不能访问 window 对象，但可以执行计算、数据处理、网络请求等任务。
Worker 与主线程通过 消息机制（postMessage） 通信，实现数据传递，保证线程安全。
创建和使用 Worker 的基本流程
下面是一个简单的例子：在后台计算斐波那契数列，避免阻塞页面交互。
立即学习“Java免费学习笔记（深入）”；
1. 创建 Worker 脚本文件（fibonacci.js）：
// fibonacci.js
self.onmessage = function(e) {
const n = e.data;
const result = fibonacci(n);
self.postMessage(result);
};
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
2. 主线程中启动 Worker 并通信：
// main.js
const worker = new Worker('fibonacci.js');
worker.onmessage = function(e) {
console.log('计算结果：', e.data);
// 更新 UI
};
worker.onerror = function(error) {
console.error('Worker 错误：', error.message);
};
// 发送数据到 Worker
worker.postMessage(35);
这样，复杂的计算就在后台完成，主线程保持流畅响应用户操作。
Worker 的类型与适用场景
- Dedicated Worker（专用 Worker）：仅被创建它的脚本使用，适合单一任务，如数据解析、加密计算。
- Shared Worker（共享 Worker）：多个脚本（如不同窗口或 iframe）可共用一个 Worker，适合跨页面通信。
- Service Worker：用于网络代理，支持离线缓存、推送通知等，常用于 PWA 应用。
大多数情况下，使用 Dedicated Worker 就足够了。
实际开发中的注意事项
- Worker 中无法访问 DOM、document、window 等全局对象，只能使用部分 API（如 setTimeout、fetch、console）。
- 传递给 Worker 的数据会被**结构化克隆算法**复制，不是共享内存。大数据量传输可能影响性能。
- 可通过 Transferable Objects（如 ArrayBuffer）实现零拷贝传输，提升效率。
- 记得在不需要时调用 worker.terminate() 手动终止线程，避免资源浪费。
- Worker 脚本必须同源加载，不能从跨域 URL 创建（CORS 不适用）。
进阶技巧：使用 Blob URL 避免外部文件
有时不想单独维护一个 .js 文件，可以用 Blob 创建内联 Worker：
const workerCode = `
self.onmessage = function(e) {
const data = e.data;
// 复杂处理
self.postMessage(data.length);
}
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
worker.onmessage = (e) => {
console.log('收到结果：', e.data);
};
worker.postMessage('Hello Worker');
这种方式适合小型、逻辑固定的 Worker，减少文件依赖。
基本上就这些。掌握 Worker 能显著提升复杂应用的用户体验，尤其在数据密集型场景下。关键是合理拆分任务，避免滥用线程。并发模型的核心是“不阻塞”，Worker 正是实现这一点的重要工具。
