Web Worker 中通过 self.postMessage() 向主线程发送进度通知，主线程用 addEventListener('message') 接收并处理；推荐传递 {type: 'progress', value: 65} 类结构化数据，避免不可序列化值，高频时需节流。

在 Web Worker 中主动向主线程发送进度通知，核心是使用 postMessage() 方法，并配合主线程的 onmessage 或 addEventListener('message', ...) 监听。

Worker 内部发送进度消息

Worker 脚本中不能直接操作 DOM，但可以随时调用 self.postMessage() 向主线程传递任意可序列化的数据（如对象、数字、字符串等）。进度通知通常用对象形式，包含类型标识和具体数值：

• 推荐结构：{ type: 'progress', value: 65 } 或 { type: 'log', msg: '正在处理第12项' }
• 避免传函数、DOM 节点、undefined 等不可序列化值，否则会静默失败
• 高频发送时（如每毫秒一次），建议节流或合并，防止主线程消息积压

主线程接收并响应进度消息

主线程创建 Worker 后，需监听其发来的消息。推荐用 addEventListener 方式，更清晰且支持多监听器：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

• worker.addEventListener('message', event => { if (event.data.type === 'progress') { updateProgressUI(event.data.value); } });
• 也可用 worker.onmessage = ...，但只能绑定一个处理函数
• 注意：event.data 就是 Worker 传入 postMessage() 的内容，不是原始事件对象本身

实际进度通知示例（Worker 内）

比如执行一个耗时循环任务，每完成 1% 就通知一次：

立即学习“Java免费学习笔记（深入）”；

// worker.js
const total = 10000;
for (let i = 0; i <= total; i++) {
  // 模拟计算
  const result = Math.sqrt(i) * Math.random();
<p>// 每 1% 发一次（即每 100 次）
if (i % 100 === 0) {
self.postMessage({
type: 'progress',
value: Math.round((i / total) * 100)
});
}
}
self.postMessage({ type: 'complete', result: 'done' });

进阶：传递可转移对象提升性能（大数组/二进制）

若进度数据含大量二进制（如图像处理中的像素块），可用 transferable 优化性能，避免拷贝：

• Worker 中：self.postMessage({ type: 'chunk', data: arrayBuffer }, [arrayBuffer]);
• 主线程收到后，arrayBuffer 在 Worker 端自动失效，仅主线程可读 —— 注意后续不能再用
• 适用于 ArrayBuffer、TypedArray、MessagePort 等，不适用于普通对象或 JSON