Web Worker 必须通过外部JS文件启动且不支持file://协议，需本地服务运行；通信需双向onmessage绑定；大对象传输应使用transferable；Worker内错误需self.onerror捕获；无法访问DOM和indexedDB。
Web Worker 不能直接在 HTML 文件里写逻辑，必须用外部 JS 文件启动；不支持 file:// 协议，本地双击打开必失败。
Worker 构造失败：路径和协议问题
常见错误是 Failed to construct 'Worker' 或 SecurityError。根本原因不是代码写错了，而是脚本加载方式违规：
- 不允许内联脚本：
new Worker("data:text/javascript,...")和<script>new Worker(`...`)</script>在 Safari、旧 Edge 等浏览器直接报错 - 不允许
file://协议：双击 HTML 打开时 origin 是null，Worker 脚本无法 fetch 加载 —— 必须起本地服务（如npx http-server或 VS Code Live Server） - 路径解析不稳定：相对路径
"./worker.js"在某些构建环境（如 Vite）下可能失效；ESM 环境推荐写法：new Worker(new URL('./worker.js', import.meta.url), { type: 'module' })
主线程与 Worker 通信必须双向绑定 onmessage
只在主线程写 worker.onmessage 不够，Worker 脚本里也必须显式声明 self.onmessage，否则消息发出去就石沉大海：
- 主线程发送：
worker.postMessage({ id: 1, data: [1,2,3] }) - Worker 脚本（
worker.js）中必须有：self.onmessage = function(e) { /* 处理 e.data */ self.postMessage(result) } - 漏掉
self.onmessage或拼错（比如写成onMessage），Worker 就不会响应，控制台也无报错提示 - 大对象传输别裸传：
postMessage(largeArray)会触发结构化克隆，卡顿明显；改用 transferable：worker.postMessage({ buffer }, [buffer])，仅限ArrayBuffer及其视图
Worker 内部报错默认静默，必须主动捕获
Worker 线程里抛出未捕获异常（比如 fetch 失败、JSON.parse 出错），不会冒泡到主线程，也不会显示在 DevTools 控制台主面板 —— 表现就是“没反应”：
立即学习“前端免费学习笔记（深入）”；
- Worker 脚本中加：
self.onerror = e => self.postMessage({ type: 'error', message: e.message }) - 主线程监听：
worker.addEventListener('message', e => { if (e.data.type === 'error') console.error('[Worker]', e.data.message) }) - 注意：
try/catch捕不到异步错误（如setTimeout(() => { throw 'x' })），仍得靠self.onerror - 调试时去 Chrome DevTools 的
Sources → Page → workers下找对应 Worker，右键可“Open in Debugger”单步
最容易被忽略的是：Worker 无法访问 indexedDB.open()，也不能操作 DOM；所谓“后台数据库运算”，其实是主线程查数据 → 序列化后发给 Worker → Worker 纯计算 → 发回结果 → 主线程再写库。整个链条里，任何一环没配好 onmessage 或路径/协议不对，任务就停在第一步。
