Web Worker 是浏览器提供的后台线程 API，不阻塞主线程，支持并发执行但无法访问 DOM；通过 postMessage 通信，适用于 CPU 密集型任务。
JavaScript Web Worker 是浏览器提供的一个 API，允许你在后台线程中运行脚本，**不阻塞主线程**，从而避免影响页面响应和渲染。它不是“真正的多线程”（JS 本身仍是单线程），但通过独立的执行上下文，实现了**并发执行**的能力。
Web Worker 的核心特点
Worker 运行在与主页面隔离的线程中，有自己的全局对象（self）、作用域和事件循环，**不能直接访问 DOM、window、document 或 localStorage**。它只能通过 postMessage() 和 onmessage 与主线程通信，数据传递采用结构化克隆（非引用共享）。
- 适合 CPU 密集型任务：如图像处理、加密解密、大数据排序、JSON 解析等
- 无法操作 UI，所有 DOM 更新仍需交由主线程完成
- 每个 Worker 是一个独立的 JavaScript 执行环境，启动有开销，不宜频繁创建
如何创建并使用一个基本 Worker
第一步是将需要后台执行的逻辑写入单独的 JS 文件（例如 worker.js），然后在主线程中实例化：
worker.js：
立即学习“Java免费学习笔记（深入）”；
self.onmessage = function(e) {
const data = e.data;
// 模拟耗时计算
let result = 0;
for (let i = 0; i < data * 1000000; i++) {
result += i;
}
self.postMessage({ result });
};主线程（如 index.js）：
const worker = new Worker('worker.js');
worker.postMessage(100); // 发送数据
<p>worker.onmessage = function(e) {
console.log('计算结果：', e.data.result);
};</p><p>// 错误监听（可选）
worker.onerror = function(err) {
console.error('Worker 报错：', err.message);
};实用技巧与注意事项
Worker 不是万能加速器，用对场景才有效果：
- 用
importScripts()在 Worker 内部加载其他脚本（如第三方算法库） - 可使用
setTimeout、fetch、IndexedDB等异步 API，但不能用XMLHttpRequest（已废弃，推荐 fetch） - 大型数据传输建议使用 Transferable Objects（如 ArrayBuffer），避免拷贝开销
- 用完及时调用
worker.terminate()释放资源，尤其在 SPA 中反复创建时
进阶：SharedArrayBuffer 与 Atomics（有限多线程协作）
现代浏览器支持 SharedArrayBuffer，配合 Atomics API，可在 Worker 和主线程间**共享内存并安全同步**（需开启跨域策略，如 crossorigin 属性和 HTTP 头）。但这属于高级用法，需谨慎处理竞态条件，日常开发中多数场景用 message 通信已足够。
不复杂但容易忽略：Worker 的价值不在“快”，而在“不卡”。只要主线程保持流畅，用户感知就是应用很顺。
