详细说明 Web Workers 的通信机制 (postMessage, MessageChannel, BroadcastChannel)，以及 Transferable Objects 如何实现零拷贝数据传输。

各位观众，大家好！我是今天的主讲人，代号“数据搬运工”，很高兴能跟大家一起聊聊 Web Workers 的通信机制，以及那些让数据“咻”一下就传过去的 Transferable Objects。

今天的主题是“Web Workers 通信秘籍：零拷贝数据传输魔法”。咱们不搞那些高深莫测的理论，争取用最接地气的方式，把 Web Workers 的通信方式扒个底朝天。

咱们先来聊聊 Web Workers 为啥要通信？你想想，Web Workers 就像是浏览器里的“外包小弟”，专门帮你干一些耗时的活儿，比如图像处理、复杂计算等等。但是，小弟算完的结果总得告诉你吧？或者你需要给小弟提供一些数据，让他开始工作吧？所以，通信就成了 Web Workers 的命脉。

第一部分：Web Workers 通信三剑客

Web Workers 主要靠三种方式进行通信：postMessage、MessageChannel 和 BroadcastChannel。咱们一个一个来过招。

postMessage：最常用的“信使”

postMessage 就像咱们平时发微信消息一样，简单直接。主线程给 Worker 发消息，Worker 给主线程发消息，都靠它。

主线程（main.js）：

const worker = new Worker('worker.js');

worker.postMessage({ type: 'START', data: [1, 2, 3, 4, 5] }); // 发送消息给 Worker

worker.onmessage = (event) => {
  console.log('主线程收到消息:', event.data); // 接收 Worker 发来的消息
};

worker.onerror = (error) => {
  console.error('Worker 出错了:', error);
};

Worker 线程（worker.js）：

self.onmessage = (event) => {
  console.log('Worker 收到消息:', event.data);

  if (event.data.type === 'START') {
    const result = event.data.data.map(x => x * 2);
    self.postMessage({ type: 'RESULT', data: result }); // 发送消息给主线程
  }
};

self.onerror = (error) => {
  console.error('Worker 出错了:', error);
};

代码解释：

new Worker('worker.js')：创建了一个新的 Worker 实例，并指定了 Worker 脚本的路径。
worker.postMessage(message)：主线程使用 postMessage 方法向 Worker 发送消息。消息可以是任何 JavaScript 对象。
worker.onmessage = (event) => { ... }：主线程监听 message 事件，当 Worker 发送消息过来时，会触发这个事件。event.data 包含了 Worker 发送的数据。
self.onmessage = (event) => { ... }：Worker 线程使用 self.onmessage 监听消息，当主线程发送消息过来时，会触发这个事件。event.data 包含了主线程发送的数据。
self.postMessage(message)：Worker 线程使用 self.postMessage 方法向主线程发送消息。

postMessage 的特点：

简单易用： API 非常简单，容易上手。
异步通信： 消息发送是异步的，不会阻塞主线程或 Worker 线程。
数据拷贝： 重点来了！postMessage 默认情况下会对数据进行拷贝。这意味着，当主线程向 Worker 发送一个很大的数组时，浏览器会创建一个该数组的副本，然后将副本发送给 Worker。这会导致性能问题，尤其是在处理大数据时。

MessageChannel：私密的“聊天频道”

MessageChannel 就像建立了一个主线程和 Worker 之间的专属聊天频道。只有频道两端的人才能听到彼此的消息，更加安全和可控。

主线程（main.js）：

const worker = new Worker('worker.js');
const channel = new MessageChannel();

// 将 channel 的 port2 发送给 Worker
worker.postMessage({ port: channel.port2 }, [channel.port2]);

channel.port1.onmessage = (event) => {
  console.log('主线程收到消息 (通过 MessageChannel):', event.data);
};

channel.port1.postMessage('Hello from main thread!');

Worker 线程（worker.js）：

self.onmessage = (event) => {
  if (event.data.port) {
    const port = event.data.port;

    port.onmessage = (event) => {
      console.log('Worker 收到消息 (通过 MessageChannel):', event.data);
      port.postMessage('Hello from worker!');
    };
  }
};

代码解释：

const channel = new MessageChannel()：创建了一个新的 MessageChannel 实例。MessageChannel 包含两个 MessagePort 对象：port1 和 port2。
worker.postMessage({ port: channel.port2 }, [channel.port2])：将 channel.port2 发送给 Worker。注意第二个参数 [channel.port2]，这表示要将 channel.port2 进行转移 (Transferable Objects)，而不是拷贝。咱们后面会详细讲 Transferable Objects。
channel.port1.onmessage = (event) => { ... }：主线程监听 channel.port1 的 message 事件，接收 Worker 通过 channel.port2 发送的消息。
channel.port1.postMessage(message)：主线程通过 channel.port1 向 Worker 发送消息。
Worker 线程接收到 channel.port2 后，也需要监听它的 message 事件，并使用 postMessage 方法发送消息。

MessageChannel 的特点：

双向通信： 允许主线程和 Worker 线程进行双向通信。
私有通道： 创建了一个私有的通信通道，只能由通道两端的线程使用。
Transferable Objects： 可以配合 Transferable Objects 实现零拷贝数据传输，提高性能。

BroadcastChannel：广播喇叭

BroadcastChannel 就像一个广播喇叭，任何连接到同一个 BroadcastChannel 的页面或 Worker 都可以接收到消息。

页面 1 (page1.html):

<!DOCTYPE html>
<html>
<head>
  <title>Page 1</title>
</head>
<body>
  <script>
    const channel = new BroadcastChannel('my-channel');

    channel.onmessage = (event) => {
      console.log('Page 1 收到消息:', event.data);
    };

    channel.postMessage('Hello from Page 1!');
  </script>
</body>
</html>

页面 2 (page2.html):

<!DOCTYPE html>
<html>
<head>
  <title>Page 2</title>
</head>
<body>
  <script>
    const channel = new BroadcastChannel('my-channel');

    channel.onmessage = (event) => {
      console.log('Page 2 收到消息:', event.data);
    };

    channel.postMessage('Hello from Page 2!');
  </script>
</body>
</html>

Worker 线程 (worker.js):

const channel = new BroadcastChannel('my-channel');

channel.onmessage = (event) => {
  console.log('Worker 收到消息:', event.data);
};

channel.postMessage('Hello from Worker!');

代码解释：

const channel = new BroadcastChannel('my-channel')：创建了一个名为 my-channel 的 BroadcastChannel 实例。所有使用相同名称的 BroadcastChannel 实例都会连接到同一个频道。
channel.onmessage = (event) => { ... }：监听 message 事件，接收来自其他页面或 Worker 的消息。
channel.postMessage(message)：向频道发送消息，所有连接到该频道的页面和 Worker 都会收到该消息。

BroadcastChannel 的特点：

广播通信： 向所有连接到同一个频道的页面和 Worker 发送消息。
跨页面通信： 可以用于在不同的页面之间进行通信。
简单易用： API 非常简单，容易上手。
数据拷贝： 同样，BroadcastChannel 默认情况下也会对数据进行拷贝。

通信方式对比：

特性	`postMessage`	`MessageChannel`	`BroadcastChannel`
通信模式	点对点	点对点	广播
通信对象	主线程 <-> Worker	主线程 <-> Worker	所有连接到频道的页面和 Worker
数据传输	拷贝	拷贝/转移	拷贝
使用场景	简单的消息传递	需要私有通道的通信	需要广播消息的场景

第二部分：Transferable Objects：零拷贝数据传输魔法

前面咱们提到了 postMessage 和 BroadcastChannel 默认情况下会对数据进行拷贝，这在处理大数据时会严重影响性能。为了解决这个问题，就有了 Transferable Objects。

Transferable Objects 允许你将数据的所有权从一个上下文（例如主线程）转移到另一个上下文（例如 Worker 线程），而无需进行拷贝。这意味着，数据实际上并没有被复制，而是直接被移动了。

哪些对象可以成为 Transferable Objects？

ArrayBuffer
MessagePort
ImageBitmap
OffscreenCanvas

如何使用 Transferable Objects？

在使用 postMessage 或 MessageChannel 发送消息时，可以将要转移的对象放在 postMessage 的第二个参数中。这个参数是一个数组，包含了所有要转移的对象。

主线程（main.js）：

const worker = new Worker('worker.js');
const buffer = new ArrayBuffer(1024 * 1024 * 100); // 100MB 的 ArrayBuffer
const uint8Array = new Uint8Array(buffer);
for (let i = 0; i < uint8Array.length; i++) {
  uint8Array[i] = i % 256;
}

console.time('Transfer');
worker.postMessage(buffer, [buffer]); // 转移 ArrayBuffer 的所有权
console.timeEnd('Transfer');

worker.onmessage = (event) => {
  console.log('主线程收到消息:', event.data);
  console.timeEnd('Process');
};

worker.onerror = (error) => {
  console.error('Worker 出错了:', error);
};

Worker 线程（worker.js）：

self.onmessage = (event) => {
  const buffer = event.data;
  console.log('Worker 收到 ArrayBuffer:', buffer.byteLength);
  console.time('Process');
  const uint8Array = new Uint8Array(buffer);
  for (let i = 0; i < uint8Array.length; i++) {
    uint8Array[i] = uint8Array[i] + 1;
  }
  self.postMessage('Worker 完成处理');
};

self.onerror = (error) => {
  console.error('Worker 出错了:', error);
};

代码解释：

const buffer = new ArrayBuffer(1024 * 1024 * 100)：创建了一个 100MB 的 ArrayBuffer。
worker.postMessage(buffer, [buffer])：将 buffer 作为 Transferable Object 发送给 Worker。注意第二个参数 [buffer]，这表示要将 buffer 的所有权转移给 Worker。
当主线程将 buffer 转移给 Worker 后，主线程就不能再访问 buffer 了。如果尝试访问，会得到一个错误。
Worker 线程接收到 buffer 后，就可以像访问本地数据一样访问它。

Transferable Objects 的优势：

零拷贝： 避免了数据拷贝，提高了性能。
适用于大数据： 特别适用于处理大型数据，例如图像、视频、音频等。
提高响应速度： 由于避免了数据拷贝，可以更快地将数据传递给 Worker 线程进行处理，从而提高应用程序的响应速度。

Transferable Objects 的注意事项：

所有权转移： 一旦将对象转移给另一个上下文，原始上下文就不能再访问该对象了。
支持的对象类型有限： 只有 ArrayBuffer、MessagePort、ImageBitmap 和 OffscreenCanvas 可以作为 Transferable Objects。
需要显式指定： 需要在 postMessage 的第二个参数中显式指定要转移的对象。

第三部分：实战案例：图像处理加速

咱们来一个实际的例子，看看如何使用 Transferable Objects 加速图像处理。

假设我们需要对一张图片进行灰度处理。传统的做法是将图像数据拷贝到 Worker 线程进行处理，然后再将处理后的数据拷贝回主线程。这会导致大量的内存拷贝，影响性能。

使用 Transferable Objects，我们可以将图像数据直接转移到 Worker 线程进行处理，避免了内存拷贝。

主线程（main.js）：

const worker = new Worker('worker.js');
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();

image.onload = () => {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);

  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const buffer = imageData.data.buffer;

  console.time('Grayscale');
  worker.postMessage({
    width: canvas.width,
    height: canvas.height,
    buffer: buffer
  }, [buffer]); // 转移 ArrayBuffer 的所有权
};

worker.onmessage = (event) => {
  const imageData = new ImageData(new Uint8ClampedArray(event.data.buffer), event.data.width, event.data.height);
  ctx.putImageData(imageData, 0, 0);
  console.timeEnd('Grayscale');
};

image.src = 'image.jpg'; // 替换为你的图片路径

Worker 线程（worker.js）：

self.onmessage = (event) => {
  const width = event.data.width;
  const height = event.data.height;
  const buffer = event.data.buffer;
  const imageData = new Uint8ClampedArray(buffer);

  for (let i = 0; i < imageData.length; i += 4) {
    const r = imageData[i];
    const g = imageData[i + 1];
    const b = imageData[i + 2];
    const gray = (r + g + b) / 3;

    imageData[i] = gray;
    imageData[i + 1] = gray;
    imageData[i + 2] = gray;
  }

  self.postMessage({
    width: width,
    height: height,
    buffer: buffer
  }, [buffer]); // 将处理后的 ArrayBuffer 转移回主线程
};

代码解释：

主线程首先将图片绘制到 Canvas 上，然后使用 ctx.getImageData 获取图像数据。
imageData.data.buffer 包含了图像数据的 ArrayBuffer。
主线程将 ArrayBuffer 作为 Transferable Object 发送给 Worker 线程。
Worker 线程接收到 ArrayBuffer 后，将其转换为 Uint8ClampedArray，然后进行灰度处理。
Worker 线程将处理后的 ArrayBuffer 作为 Transferable Object 发送回主线程。
主线程接收到 ArrayBuffer 后，将其转换为 ImageData，然后使用 ctx.putImageData 将处理后的图像数据绘制到 Canvas 上。

通过这个例子，我们可以看到，使用 Transferable Objects 可以有效地提高图像处理的性能，避免了不必要的内存拷贝。

第四部分：总结与展望

今天咱们一起学习了 Web Workers 的三种通信方式：postMessage、MessageChannel 和 BroadcastChannel，以及如何使用 Transferable Objects 实现零拷贝数据传输。

postMessage 简单易用，适用于简单的消息传递。
MessageChannel 提供了私有的通信通道，适用于需要安全和可控的通信场景。
BroadcastChannel 可以广播消息，适用于需要在多个页面和 Worker 之间进行通信的场景。
Transferable Objects 可以避免数据拷贝，提高性能，特别适用于处理大数据。

随着 Web 技术的不断发展，Web Workers 的应用场景也越来越广泛。掌握 Web Workers 的通信机制，以及如何使用 Transferable Objects 优化数据传输，对于开发高性能的 Web 应用至关重要。

希望今天的分享能对大家有所帮助。谢谢大家！

发表回复 取消回复

发表回复取消回复