Worker“收不到消息”或“不执行”的首要原因是通信失效，常见于实例创建失败、初始化未完成、同步错误中断、结构化克隆失败及DOM操作误用；需检查路径、注册时机、错误捕获、数据类型与上下文限制。
为什么 Worker 会“收不到消息”或“不执行”
最常见的排错起点是通信失效。主线程调用了 worker.postMessage()，但 Worker 文件里的 self.onmessage 没触发，或者反过来，Worker 调了 self.postMessage()，主线程的 worker.onmessage 却没收到。
原因通常有这几个：
- Worker 实例创建失败，但没加错误监听——比如脚本路径写错、跨域、404，new Worker('xxx.js') 会静默失败（Chrome 控制台可能只报 warning）；务必加上 worker.onerror 或检查 Network 面板确认 JS 文件是否加载成功
- 主线程发送消息时，Worker 尚未完成初始化（onmessage 监听器还没绑定）。建议在 worker.onmessage 和 worker.onerror 注册之后再发消息
- Worker 内部抛出同步错误（如引用未定义变量），会导致脚本中断，后续 onmessage 不再响应；可在 Worker 开头加 self.onerror = e => self.postMessage({ type: 'error', msg: e.message }) 主动捕获
- 传递的数据含函数、undefined、Symbol、RegExp、Date 对象等无法结构化克隆的类型，会被静默丢弃（不是报错）；只传 plain object、Array、Number、String、Boolean、null 等安全类型
DOM 操作报错：Cannot access 'document' or 'window'
刚上手容易在 Worker 文件里直接写 document.getElementById 或 window.location，结果控制台报错：“ReferenceError: document is not defined”。这不是 bug，是设计限制。
Web Worker 运行在独立上下文，没有 DOM、没有 window、没有 document、没有 localStorage（但可读 navigator 和 location）。所有界面相关操作必须由主线程完成。
正确做法是：
- Worker 只做纯计算、格式转换、数据聚合、加密解密等无副作用逻辑
- 需要渲染时，把处理好的数据通过 postMessage 发回主线程
- 主线程收到后，再用 Vue/React/DOM API 更新视图
- 若需频繁通信（如进度条），可约定消息结构，例如 { type: 'progress', value: 65 }，避免传大对象
打包工具中的路径与模块问题
在 Vue CLI、Vite 或 Webpack 项目中，直接 new Worker('./xxx.worker.js') 往往会失败——因为打包后文件路径变了，或 ES 模块语法不被原生 Worker 支持。
不同构建工具处理方式不同：
- Vite：推荐用 new Worker(new URL('./xxx.worker.js', import.meta.url), { type: 'module' })，支持顶层 await 和动态导入
- Webpack：需引入 worker-loader，并配置 rule 匹配 .worker.js 后缀；同时设置 output.globalObject: 'this'，避免 window is not defined
- Vue CLI：默认不支持 Worker，需 eject 或使用 vue-cli-plugin-web-worker 插件
- 注意：Worker 文件内不能用 import Vue from 'vue' 这类框架依赖，也不能用 require（除非配置了特定 loader）
经典案例复盘：10 万条日志实时过滤卡顿
某监控系统前端需对 10 万条原始日志做关键词高亮 + 时间范围筛选 + 级别过滤，用户点击“搜索”后页面冻结 4–5 秒。
优化前逻辑：全部在 click 回调里同步执行，阻塞渲染线程。
优化后拆解：
- 主线程：收集参数（关键词、起止时间、级别数组），构造任务对象，postMessage 发给 Worker
- Worker：逐条解析每条日志（JSON 字符串 → 对象），按条件过滤，生成带 highlight 标记的 HTML 片段（仅字符串拼接，不操作 DOM）
- Worker 分批次返回（每 2000 条一批），主线程用 requestIdleCallback 或 setTimeout(..., 0) 批量追加到列表，防重绘抖动
- 添加 worker.terminate() 在全部结果返回后立即销毁，避免常驻内存
效果：首屏响应
