替换window.postMessage跨页面传值延时

### 解决方案概述

为了实现无延迟的跨页面通信，可以考虑几种不同的方法来优化或替代 `window.postMessage`。这些方法不仅能够减少延迟，还能提高通信效率。

#### 使用 Shared Worker 实现即时通信

Shared Worker 是一种可以在多个浏览上下文之间共享的工作线程。这种方式允许不同窗口或标签页之间的消息传递更加高效和快速[^1]。

// shared-worker.js
const connections = [];

onconnect = function(e) {
    const port = e.ports[0];
    connections.push(port);

    port.onmessage = function(event) {
        broadcast(event.data);
    };

    function broadcast(data) {
        connections.forEach(connection => connection.postMessage(data));
    }
};

在各个页面中连接到这个 worker：

const myWorker = new SharedWorker('shared-worker.js');
myWorker.port.start();

myWorker.port.onmessage = function(event) {
    console.log(`Received message from other page: ${event.data}`);
};

function sendMessageToOtherPages(message) {
    myWorker.port.postMessage(message);
}

这种方法绕过了主文档流中的潜在瓶颈，提供了更为流畅的消息传输机制。

#### 利用 Broadcast Channel API

Broadcast Channel 提供了一种简单的方式，在同一个源下的所有浏览器选项卡间广播消息。它具有较低级别的开销，并且设计上就是为了支持实时通讯需求。

// 发送端
const bcSender = new BroadcastChannel('example_channel');

bcSender.postMessage('Hello, this is a test message.');

// 接收端
const bcReceiver = new BroadcastChannel('example_channel');

bcReceiver.onmessage = (e) => {
  console.log(`Message received: ${e.data}`);
};

此接口非常适合用于简单的跨页面通知场景，而且性能表现良好。

#### 考虑 WebRTC 数据通道

对于更高带宽的需求或是更复杂的交互应用来说，WebRTC 的数据通道提供了一个强大的解决方案。它可以建立 P2P 连接来进行高效的双向数据交换，适用于多媒体聊天室或其他需要低延迟的应用程序开发环境。

然而需要注意的是，设置 WebRTC 可能涉及到更多的配置工作和技术细节处理。