为什么创建同一个 BroadcastChannel 的多个实例会导致浏览器冻结？

如何解决为什么创建同一个 BroadcastChannel 的多个实例会导致浏览器冻结？

最近，我在 Chrome 中使用 API broadcastChannel 时遇到了一个奇怪的问题。 我有一个标签需要来自其他标签的数据，所以我使用 broadcastChannel 将其存档。

当用户点击按钮时，它会触发一个 postMessage 到正在收听同一个 broadcastChannel 的目标标签

const sendData = data => {
    const broadcast = new broadcastChannel('viewDataChannel')
    broadcast.postMessage(data);
};
// ...
<Button onClick={data => sendData(data)}>Send data</Button>
// Receiver
const broadcast = new broadcastChannel('viewDataChannel');
broadcast.postMessage = data => setData(data);

一切正常，直到它没有。在生产过程中，用户多次点击按钮，只需点击几下（可能是 10 次），Chrome 就会冻结（RAM 和 cpu 使用率高，我的应用程序也冻结），我不得不杀死浏览器并重新启动它。>

我通过将代码 create broadcastChannel 实例移到函数外部以在第一次创建它来修复它，但是我做了很多研究，仍然没有发现任何与创建大量相同 broadcastChannel 相关的内容会导致浏览器冻结

有人知道 broadcastChannel 的工作原理并解释为什么会这样吗？