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）：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
// fibonacci.js
self.onmessage = function(e) {
const n = e.data;
const result = fibonacci(n);
self.postMessage(result);
};
<p>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');
<p>worker.onmessage = function(e) {
console.log('计算结果：', e.data);
// 更新 UI
};</p><p>worker.onerror = function(error) {
console.error('Worker 错误：', error.message);
};</p><p>// 发送数据到 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);
}
`;
<p>const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));</p><p>worker.onmessage = (e) => {
console.log('收到结果：', e.data);
};
worker.postMessage('Hello Worker');
这种方式适合小型、逻辑固定的 Worker，减少文件依赖。
基本上就这些。掌握 Worker 能显著提升复杂应用的用户体验，尤其在数据密集型场景下。关键是合理拆分任务，避免滥用线程。并发模型的核心是“不阻塞”，Worker 正是实现这一点的重要工具。
