web worker 的 onmessage 收不到数据的根本原因是主线程未及时绑定监听器或工作线程未调用 postmessage()；必须创建 worker 后立即赋值 onmessage，再调用 postmessage()，且仅支持 onmessage 属性而非 addeventlistener。
Web Worker 的 onmessage 为什么收不到数据？
根本原因通常是主线程没正确监听，或工作线程没调用 postMessage()。onmessage 是主线程中 Worker 实例的属性，不是全局事件，必须在创建后立刻赋值，且只能赋一次——重复赋值会覆盖前一个监听器。
- 常见错误：在
worker.onmessage之前就调用worker.postMessage()，导致消息被丢弃（Worker 启动有微小延迟） - 正确做法：创建 Worker 后立即绑定
onmessage，再发消息 - 注意：
onmessage回调里的event.data就是工作线程传回的数据，不是event本身
主线程中怎么写 onmessage 才能稳定接收？
必须确保监听逻辑在 Worker 实例化之后、首次 postMessage() 之前完成。推荐封装成函数，避免时序错乱。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const worker = new Worker('calc.js');
worker.onmessage = function(event) {
console.log('收到结果：', event.data); // event.data 是 worker 传来的值
};
worker.postMessage({ type: 'calculate', payload: [123, 456] });
- 不要用
addEventListener('message', ...)—— Worker 实例不支持该 API（仅onmessage属性有效） - 如果需多次监听不同任务，建议在
onmessage内部用if/switch区分event.data.type - 避免在
onmessage中直接操作 DOM 元素（如document.getElementById），应先确认元素存在，否则容易报错
工作线程里漏掉 postMessage() 或传错类型怎么办？
Worker 脚本里必须显式调用 postMessage()，且传入的值要能被结构化克隆（不能含函数、DOM 节点、undefined）。否则主线程收不到，也不会报错。
- 典型错误：写了
return result但忘了postMessage(result) - 传对象时别传
this或console，会导致Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope' - 若需传大数组，考虑用
postMessage(data, [data.buffer])转移 ArrayBuffer，避免拷贝开销 - 调试技巧：在 Worker 脚本开头加
self.onmessage = console.log，确认消息是否送达
Chrome 控制台看不到 Worker 的 console.log？
Worker 的日志默认不出现在主页面控制台，得单独打开「Application → Service Workers」面板，勾选「Show all service workers」，或更直接：在 Worker 脚本里加 self.console.log()，然后在「Console」标签页顶部下拉菜单中选择对应 Worker 名称。
- 主线程无法用
console.log捕获 Worker 日志，必须切到对应上下文 - Worker 报错不会中断主线程，但会在控制台以「Uncaught (in promise)」或「Error in Worker」形式出现，留意右上角小红点
- 开发阶段建议 Worker 脚本第一行写
self.onerror = console.error，捕获未处理异常
onmessage 是自动注册的全局钩子，或者把 Worker 当成普通函数调用后等着 return —— 它完全是异步通信模型，所有数据流动都靠 postMessage 和 onmessage 配对驱动。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
