Web Workers 是浏览器提供的后台线程 API，用于执行 CPU 密集型任务而不阻塞主线程；其运行于隔离环境，无 DOM 访问权限，仅通过 message 机制与主线程通信，支持结构化克隆或 Transferable 零拷贝传输。
JavaScript Web Workers 是浏览器提供的一个 API，允许你在后台线程中运行脚本，从而避免阻塞主线程（即 UI 渲染和用户交互线程）。它不是真正的“多线程”（JS 本身仍是单线程），但通过独立的执行上下文，实现了并发执行的能力。
Web Workers 的核心特点
Worker 运行在与主页面完全隔离的环境中：没有 DOM、window、document 等全局对象，也不能直接操作页面。它只能通过 message 机制 与主线程通信——这是唯一安全的数据交换方式。
- 主线程和 Worker 各自拥有独立的 JS 引擎实例和事件循环
- 数据传递采用结构化克隆（如 JSON 可序列化的值），或通过 Transferable 对象（如 ArrayBuffer）实现零拷贝传输
- Worker 脚本必须放在单独的 .js 文件中（或使用 Blob URL 动态创建）
如何创建并使用 Web Worker
分三步：准备 Worker 脚本、实例化 Worker 对象、收发消息。
-
写一个 worker.js 文件：
// worker.js
self.onmessage = function(e) {
const result = e.data * e.data;
self.postMessage({ value: result });
}; -
在主线程中启动并通信：
const worker = new Worker('worker.js');
worker.postMessage(5); // 发送数字 5
worker.onmessage = function(e) {
console.log('计算结果：', e.data.value); // 输出 25
}; - 可调用
worker.terminate()主动销毁 Worker，释放资源
常见使用场景与注意事项
适合 CPU 密集型任务，比如图像处理、加密解密、大量数据排序、复杂数学计算等。不适合频繁读写 DOM 或依赖浏览器 API 的逻辑。
立即学习“Java免费学习笔记（深入）”；
- 避免在 Worker 中做
fetch后直接更新页面——要先 postMessage 回主线程再操作 DOM - 注意内存泄漏：未移除的
onmessage监听器、未终止的 Worker、闭包引用大对象都可能导致问题 - 调试时可在 DevTools 的 “Application → Service Workers” 或 “Sources → Workers” 面板中查看运行中的 Worker
基本上就这些。Web Workers 不复杂但容易忽略通信开销和上下文限制——把耗时逻辑剥离出去，再用消息桥接，就能显著提升页面响应性。
