0

最近，我在 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 使用率高，我的应用程序也冻结了），我不得不杀死浏览器并重新启动它。

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

有谁知道 BroadcastChannel 是如何工作的并解释为什么会发生这种情况？

4

0 回答 0