跳到主要内容

postMessage

2024年02月07日

柏拉文

越努力，越幸运

一、认识

worker.postMessage 可以向 worker 发送消息。第一个参数是要发送到 worker 的数据。该数据可以是任何可以被结构化克隆算法处理的 JavaScript 对象。

worker.postMessage 方法委托给 MessagePort 的 postMessage() 方法，该方法会在对应的用于接收 MessagePort 的事件循环中添加一个任务。

二、语法

worker.postMessage(message)
worker.postMessage(message, transfer)

message: 要传递给 worker 的对象；这将在传递给 DedicatedWorkerGlobalScope.message_event 事件的 data 字段中。这可以是任何值或可以通过结构化克隆算法处理的 JavaScript 对象（可以包含循环引用）。如果未提供 message 参数，则解析器将抛出 SyntaxError。如果要传递给 worker 的数据不重要，可以显式传递 null 或 undefined。
transfer: 一个可选的、会被转移所有权的可转移对象数组。如果一个对象的所有权被转移，它将在发送它的上下文中变为不可用（中止），而仅在接收方的 worker 中可用。像 ArrayBuffer、MessagePort 或 ImageBitmap 类的实例才是可转移对象，才能够被转移。不能将 null 作为 transfer 的值。

三、场景

3.1 复杂计算

index.html
<script>
    const worker = new Worker('./worker.js');

    worker.addEventListener('message', e => {
        const { data } = e;
        console.log('Message from worker: ', data);
    });

    worker.postMessage([1, 2, 3, 4, 5]);
</script>

worker.js
function calculate(data) {
  return data.reduce((prev, curr) => prev + curr, 0);
}

self.addEventListener('message', e => {
  const { data } = e;
  const result = calculate(data);
  self.postMessage(result);
});

一、认识
二、语法
三、场景
- 3.1 复杂计算