Web Worker 通过独立 JS 文件执行纯计算任务，避免主线程卡顿；需用 new Worker() 加载同源脚本，通信依赖 postMessage/onmessage 消息机制，不可操作 DOM，适合 CPU 密集型任务，使用后应及时 terminate 或 close。
直接把耗时计算扔进 Web Worker，主线程就不再卡顿。核心就三点：单独写一个 JS 文件、用 Worker 构造函数启动它、靠 postMessage 和 onmessage 传数据。
必须用独立文件启动 Worker
Worker 不能直接执行内联脚本（比如字符串代码），必须从一个真实存在的 .js 文件加载。浏览器会为它开辟全新线程和独立作用域。
- 写一个
calculator.js，里面只放纯计算逻辑，不操作 DOM - 主线程里用
const worker = new Worker('calculator.js');启动 - 路径需遵守同源策略；若要跨域，可用 Blob URL 绕过（fetch 脚本 → 转 Blob → 创建 URL）
通信只能靠消息机制
主线程和 Worker 彼此隔离，不能共享变量或调用对方函数。所有交互都靠异步消息——就像寄信。
- 主线程发数据：
worker.postMessage({ type: 'fib', n: 40 }); - Worker 接收并处理：
self.onmessage = (e) => { /* 计算 */ self.postMessage(result); }; - 主线程监听返回：
worker.onmessage = (e) => console.log('结果:', e.data); - 传递的数据会经结构化克隆，支持对象、数组、数字等，但不能传函数、DOM 节点或 undefined
Worker 内部不能碰 DOM 和全局对象
它没有 window、document、parent，也不能直接改页面。这是设计使然，也是安全边界。
立即学习“Java免费学习笔记（深入）”；
- 能用的有：
self（等价于 window）、fetch、XMLHttpRequest、setTimeout、console等 - 不能用的有：
document.getElementById、alert、localStorage（部分浏览器限制）、history - 适合场景：斐波那契、大数据排序、图像像素处理、加密解密、JSON 解析等纯 CPU 任务
记得及时销毁不用的 Worker
Worker 长期运行会占用内存和线程资源，用完就关掉，避免泄漏。
- 主线程关闭：
worker.terminate(); - Worker 自己关闭：
self.close(); - 建议在收到结果后立刻终止，尤其是一次性任务；长期任务可配合状态管理控制生命周期
