JavaScript Web Worker 中怎么通过 postMessage 向子线程传递数据-js教程-PHP中文网

JavaScript 中主线程通过 postMessage() 向 Web Worker 传递数据采用结构化克隆，仅支持可序列化类型（如字符串、对象、ArrayBuffer 等），不支持函数、DOM 节点等；传输 ArrayBuffer 需通过 transferList 实现零拷贝。

javascript web worker 中怎么通过 postmessage 向子线程传递数据

在 JavaScript 中，主线程通过 postMessage() 向 Web Worker 子线程传递数据，本质是**结构化克隆（structured clone）**，不是传引用，也不支持函数、DOM 节点等不可序列化对象。

传递的数据类型要合法

只能传递可被结构化克隆算法处理的值，包括：

基本类型：字符串、数字、布尔值、null、undefined（注意：undefined 在某些浏览器中会被忽略或转为 null）
数组、普通对象（不含循环引用）、Date、RegExp、Map、Set、Blob、File、ArrayBuffer、TypedArray、DataView
嵌套结构也支持，比如 { user: { id: 1, name: "Alice" }, tags: ["a", "b"] }

❌ 不支持：function、Promise、Element、window、console、带循环引用的对象、Error 实例等。

传递方式：调用 worker.postMessage()

创建 Worker 后，直接在其实例上调用 postMessage()，第一个参数是要发送的数据，第二个参数（可选）用于传输 ArrayBuffer 或 TypedArray 的所有权（即“转移”而非拷贝，提升性能）：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

const worker = new Worker('worker.js');
<p>// 普通数据（拷贝）
worker.postMessage({ type: 'FETCH', url: '/api/data' });</p><p>// 传输 ArrayBuffer（零拷贝，原主线程无法再访问该 buffer）
const buffer = new ArrayBuffer(1024);
worker.postMessage({ data: buffer }, [buffer]);
</p>

⚠️ 注意：[buffer] 必须是实际要转移的 ArrayBuffer（或其视图），且不能出现在消息对象内部——必须作为第二个参数显式列出。

子线程接收数据

Worker 内部通过监听 message 事件获取数据，event.data 就是主线程发来的克隆副本：

// worker.js
self.onmessage = function(event) {
  const data = event.data; // 已是独立副本，修改不影响主线程
  console.log('收到：', data);
<p>// 可以回传结果
self.postMessage({ status: 'done', result: data.value * 2 });
};
</p>