Web Workers 是浏览器提供的后台线程机制，实现 JavaScript 多线程运行以避免阻塞主线程；它与主线程隔离，仅通过 postMessage 通信，支持 Dedicated 和 Shared 两种类型，适用于耗时计算等场景。
Web Workers 是浏览器提供的、让 JavaScript 在后台线程中运行的机制，它能真正实现多线程执行，避免阻塞主线程（即 UI 渲染和用户交互线程）。
Web Workers 的核心作用
JavaScript 本身是单线程的，所有任务（脚本执行、DOM 操作、事件响应等）都在同一个线程上排队运行。一旦遇到耗时计算（比如大数组排序、图像处理、加密解密），页面就会卡顿甚至无响应。Web Workers 把这些重任务“搬”到独立的后台线程里，主线程继续流畅工作。
关键点：Worker 线程与主线程完全隔离，不能访问 DOM、window、document 等全局对象，也不能直接修改页面；通信只能通过 消息机制（postMessage + onmessage） 进行。
如何创建并使用一个 Web Worker
分三步：写 Worker 脚本 → 创建 Worker 实例 → 双向通信
立即学习“Java免费学习笔记（深入）”；
-
1. 编写 Worker 文件（例如 worker.js）：
在该文件中，可用 self 或 this 表示当前 Worker 全局对象；监听主线程发来的消息，并返回结果：self.onmessage = function(e) {
const data = e.data;
const result = data * data; // 示例：简单计算
self.postMessage({ result });
}; -
2. 主线程中启动 Worker：
const worker = new Worker('worker.js');
worker.postMessage(5); // 发送数字 5 给 Worker -
3. 主线程监听 Worker 返回结果：
worker.onmessage = function(e) {
console.log('Worker 返回：', e.data.result); // 输出 25
};
常见类型与适用场景
目前主流支持两种 Worker：
- Dedicated Worker（专用 Worker）：最常用，一对一绑定，仅被创建它的脚本访问。适合单个复杂计算、数据预处理、轮询后台接口等。
- Shared Worker（共享 Worker）：多个页面/iframe 可共用同一个 Worker 实例（需同源），通过 port 通信。适合跨标签页共享状态或统一管理长连接。
注意：Service Worker 虽也属 Worker 类型，但定位不同——它是为离线缓存、网络代理设计的，不用于通用计算任务。
注意事项与限制
- Worker 脚本必须托管在 HTTP/HTTPS 协议下（file:// 协议会失败）
- 无法使用 alert、confirm、prompt，也不能操作 DOM
- Worker 内部可使用 fetch、setTimeout、WebSockets、JSON、ArrayBuffer 等，但不可用 localStorage（可用 IndexedDB）
- 记得调用
worker.terminate()手动销毁不用的 Worker，避免内存泄漏 - 调试时可在 Chrome DevTools 的 “Application → Service Workers” 或 “Sources → Workers” 标签下查看运行中的 Worker
