web worker通信失败主因是消息未被接收或处理，需检查路径是否通畅（脚本路径、协议限制、同源策略）和消息是否正确（监听绑定、序列化合规、错误捕获）。
Web Worker 通信失败，通常不是“没发出去”，而是“发了但没被收到”或“收到了但没处理”。核心要抓住两点：路径是否通、消息是否对路。
检查 Worker 实例是否真正创建成功
Worker 构造失败，后续所有通信都无从谈起。常见原因有：
- 脚本路径非法：new Worker('./worker.js') 在某些构建环境（如 Vite 生产构建）下会解析失败；推荐改用 new Worker(new URL('./worker.js', import.meta.url))（ESM 环境下最稳）
- 本地文件协议限制：直接双击 HTML 打开（file:// 协议）会触发 Failed to construct 'Worker': Script at 'file:///' cannot be accessed from origin 'null'；必须用 HTTP/HTTPS 服务启动，例如 npx http-server 或 VS Code Live Server 插件
- 跨域加载：Worker 脚本必须同源；若需加载远程逻辑，可用 fetch + Blob 方式动态构造：new Worker(URL.createObjectURL(new Blob([scriptText], {type: 'application/javascript'})))
确认消息收发两端都已正确绑定监听
postMessage 是单向发射器，onmessage 是被动接收器，缺一不可，且不能靠“默认存在”。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 主线程中：必须显式写 worker.onmessage = e => {...} 或 worker.addEventListener('message', ...)；仅调用 postMessage 不会自动触发回调
- Worker 线程中：全局对象是 self，不是 window；需写 self.onmessage = e => {...} 或 self.addEventListener('message', ...)；console.log(self) 不等于 self 已就绪
- 注意拼写：onmessage 不是 onMessage，也不是 onMessageReceived；大小写和命名必须完全匹配 Web 标准
验证消息内容是否可序列化且结构合理
Worker 与主线程之间不共享内存，所有数据靠结构化克隆（structured clone）传递，不支持函数、DOM 节点、undefined、循环引用等。
- 只传基础类型：字符串、数字、布尔值、普通对象、数组、Date、RegExp、ArrayBuffer、TypedArray、Map、Set（现代浏览器支持）
- 避免传错对象：比如把一个 class 实例、Vue 响应式对象、或含方法的 config 对象直接 postMessage，会被静默过滤掉部分字段甚至整个消息
- 调试技巧：在发送前加 console.log(JSON.stringify(data, null, 2))，确认能完整序列化；若报错“Converting circular structure to JSON”，说明数据里有循环引用
捕获并透传 Worker 内部错误
Worker 中未捕获的异常默认静默，不会抛到主线程，容易误判为“没运行”。必须主动兜底：
- 在 worker.js 开头加：self.onerror = e => self.postMessage({ type: 'error', message: e.message, filename: e.filename, lineno: e.lineno })
- 主线程监听：worker.addEventListener('message', e => { if (e.data.type === 'error') console.error('[Worker]', e.data.message) })
- 注意：try/catch 捕不到异步错误（如 fetch 失败、setTimeout 抛错），仍依赖 onerror
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
