WebAssembly (WASM) for High Performance Apps · 课时

WASM 线程之间的消息传递与通道

使用消息传递模式和通道抽象，而不是直接使用共享内存，来协调并行 WASM 工作线程。

WASM 线程之间的消息传递与通道 是 CoddyKit 上的免费 WebAssembly (WASM) for High Performance Apps 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 WebAssembly (WASM) for High Performance Apps 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 WebAssembly (WASM) for High Performance Apps 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Two Models of Concurrency

Concurrent systems coordinate either by sharing memory (SharedArrayBuffer + atomics) or by passing messages. Message passing avoids many data races by design.

postMessage Basics

Web Workers communicate with postMessage. Data is structured-cloned, so each side gets its own copy.

const worker = new Worker("worker.js");
worker.postMessage({ cmd: "start", n: 1000 });
worker.onmessage = (e) => console.log("result", e.data);

Transferable Objects

To avoid copying large buffers, transfer ownership instead of cloning.

const buf = new ArrayBuffer(1024 * 1024);
worker.postMessage({ buf }, [buf]);
// buf is now neutered in the sender

Designing a Channel

A channel is a typed queue abstraction layered over postMessage: a send side and a receive side with backpressure and request IDs.

Request/Response Correlation

Attach a unique id to each message so async replies can be matched to their originating request via a pending-promise map.

const pending = new Map();
let nextId = 1;
function call(payload) {
  const id = nextId++;
  return new Promise((res) => {
    pending.set(id, res);
    worker.postMessage({ id, payload });
  });
}

Fan-Out Work Pools

For data parallelism, spawn N workers and round-robin tasks to them. Collect results as they arrive, preserving order with the request IDs.

Combining with Shared Memory

Message passing for control, SharedArrayBuffer for bulk data is a powerful hybrid: send a small message saying which slice to process, while the data lives in shared memory.

Avoiding Deadlocks

Pure message-passing systems still deadlock if two parties each wait for the other. Keep protocols acyclic and prefer non-blocking sends.

Serialization Cost

Structured clone is convenient but costly for big graphs. Prefer transferables or shared memory when payloads grow large.

Worker Lifecycle

Create workers up front in a pool and reuse them; spinning up a worker per task wastes time loading and instantiating the WASM module each time.

A Channel-Based Pipeline

Chain stages: source worker emits chunks, a transform worker processes them, a sink worker aggregates — each connected by a channel for a clean streaming pipeline.

Quick Check

How do you send a large ArrayBuffer to a worker without copying it?

Recap

You explored message passing with postMessage, transferables to avoid copies, and channel abstractions with request IDs and worker pools. Hybrid designs pair messages for control with shared memory for bulk data.

常见问题解答

「WASM 线程之间的消息传递与通道」课时是免费的吗？

是的 — 「WASM 线程之间的消息传递与通道」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 WebAssembly (WASM) for High Performance Apps 课程的其余内容，请升级到 CoddyKit PRO。 WebAssembly (WASM) for High Performance Apps 课程共包含 4 节课。

「WASM 线程之间的消息传递与通道」这节课中我会学到什么？

使用消息传递模式和通道抽象，而不是直接使用共享内存，来协调并行 WASM 工作线程。你通过在浏览器中直接运行的动手代码来练习 WebAssembly (WASM) for High Performance Apps，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 WebAssembly (WASM) for High Performance Apps 需要有经验吗？

无需任何先前经验。CoddyKit 上的 WebAssembly (WASM) for High Performance Apps 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「WASM 线程之间的消息传递与通道」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 WebAssembly (WASM) for High Performance Apps 课中编写并运行代码吗？

能。每节 WebAssembly (WASM) for High Performance Apps 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 WebAssembly (WASM) for High Performance Apps