SharedWorker和BroadcastChannel是多标签页通信中内存泄漏高发区：SharedWorker因全局单例易持有已关闭页面的引用，BroadcastChannel若未清理监听器或传递非序列化对象也会导致隐式强引用。
多标签页通信本身不直接导致内存泄漏，但它是泄漏的“放大器”和“隐藏器”——一旦某标签页中存在未清理的监听、共享资源或跨页引用，其他标签页可能意外持有其对象，让 GC 无法回收。
重点查 SharedWorker 和 BroadcastChannel 的生命周期绑定
这两个是当前（2026年）最常用的多标签页通信机制，也是泄漏高发区：
- SharedWorker：全局单例，生命周期独立于页面。如果在 Worker 内部缓存了来自某个页面的回调函数、DOM 引用或大型数据结构，而该页面已关闭，这些引用仍被 Worker 持有，就会造成 JS 堆泄漏。
-
BroadcastChannel：看似轻量，但每个
channel.postMessage()发送的对象若含闭包、this 绑定或未序列化的值（如函数、Promise、CanvasRenderingContext），会在内部 MessagePort 中形成隐式强引用；更关键的是，channel.addEventListener('message', handler)若没配对removeEventListener，handler 就会持续绑定在 channel 实例上，哪怕注册它的页面早已关闭。
确认跨页引用是否真实“存活”
不能只看某个标签页的 Heap Snapshot，要对比多个页面的快照关联性：
- 在 Chrome DevTools 的 Memory 面板中，对每个标签页分别录制 Heap Snapshot，筛选出疑似泄漏对象（如自定义消息处理器、大型缓存 Map）。
- 点击对象 → 查看 Retainers 标签页，重点找是否被
SharedWorkerGlobalScope或BroadcastChannel实例持有。 - 切换到 Application → Shared Workers 页面，查看当前活跃的 SharedWorker 线程数及绑定的客户端数量；若客户端数为 0 但 Worker 仍在运行，说明它可能卡在未终止的定时器或未 resolve 的 Promise 中。
检查 postMessage 传递的数据是否携带隐式引用
很多泄漏源于“以为传的是纯数据，实际传了活对象”：
立即学习“Java免费学习笔记（深入）”；
- 避免直接
postMessage({ data, callback })—— callback 是函数，无法跨线程传输，会被序列化丢弃，但 V8 在序列化失败时可能保留部分上下文引用，造成难以追踪的残留。 - 禁止传递
document、window、canvas.getContext('2d')等原生对象；它们无法被正确序列化，且可能触发 Blink 原生堆的间接持有。 - 推荐做法：只传 plain object + ArrayBuffer；如需响应，用
messageId+ 主动轮询或 reply channel（新建独立 BroadcastChannel）解耦。
Vue/React 应用中特别注意跨页状态同步逻辑
当使用 Pinia、Zustand 或 Context API 同步状态到其他标签页时，容易忽略卸载清理：
- 反例：组件
mounted中调用channel.postMessage({ type: 'SYNC_STATE', payload: store.state })，但未监听beforeUnmount停止订阅或清除本地缓存副本。 - 正例：用
onBeforeUnmount显式调用channel.removeEventListener，并清空通过structuredClone创建的本地副本；对 store 中的大字段（如日志数组、临时 canvas 数据）做浅拷贝或 key-based 按需同步。 - 验证方式：在 DevTools Console 中执行
performance.memory，反复打开/关闭含通信逻辑的页面，观察usedJSHeapSize是否阶梯式上升且不回落。
