web worker防坑关键在理解边界、通信与生命周期：需同源加载脚本，通信用transferable避免深拷贝，worker内无dom，须监听错误并及时关闭。
Web Worker 是前端突破单线程瓶颈的关键工具，但落地时容易掉进“能跑通却不敢用”的陷阱。真正防坑不靠背 API，而在于理解限制边界、通信本质和生命周期管理。下面从四个高频踩坑点出发，讲清怎么做、为什么这么做。
同源与文件加载：Worker 脚本必须独立且同源
Worker 构造函数参数必须是网络可访问的 JS 文件路径（如 'worker.js'），不能是内联字符串或本地 file:// 协议地址。双击 HTML 打开会因跨域报错，必须走本地服务器（如 Vite、http-server）。
- 确保 worker.js 和主页面部署在同一域名、协议、端口下；否则触发 SecurityError
- 不要写
new Worker('data:text/javascript,...')或new Worker('blob:...')—— 多数浏览器已禁用或行为不一致 - 脚本加载失败时 Worker 静默失败，建议加
worker.onerror捕获并提示构建/部署问题
通信不是共享内存：数据传递默认深拷贝
主线程调用 postMessage(data) 时，浏览器会对 data 做结构化克隆（structured clone），对象被复制而非引用。这意味着：
- 你无法在 Worker 中修改主线程传入的数组或对象，原值不会变
- 大对象（如百万级数组、图像 ArrayBuffer）反复拷贝会造成明显延迟和内存压力
- 解决方法：使用 Transferable Objects（如
[arrayBuffer]第二个参数）把所有权移交 Worker，避免拷贝——但移交后主线程该 buffer 就不可用了
DOM 和全局对象隔离：Worker 内没有 window、document、alert
Worker 运行在完全独立的上下文，self 是其全局对象，它只暴露有限 API：
- ✅ 可用：
console、fetch、setTimeout、importScripts()、atob/btoa、crypto - ❌ 不可用：
window、document、localStorage、alert、parent、top、所有 DOM 方法 - ⚠️ 注意：
location和navigator存在但只读；XMLHttpRequest可用但推荐用fetch
生命周期与错误处理：不关、不监听、不重试 = 内存泄漏 + 静默失败
Worker 启动后持续运行，不主动终止会一直占内存；未捕获错误会导致任务中断且无提示。
- 主线程应监听
worker.onerror，并在必要时worker.terminate()清理 - Worker 内部也要加
self.onerror = () => { self.postMessage({ error: 'xxx' }); }，把错误带出线程 - 避免长期驻留：计算型任务完成后立即
self.close()；需复用的 Worker 可缓存，但要设超时自动销毁（如 5 分钟无消息） - 多个 Worker 协同时，别共用同一实例；每个任务建议新建独立 Worker，或用 Worker Pool 管理复用
