BroadcastChannel频道名必须逐字符一致，大小写或空格差异即导致隔离通信；需统一用常量定义、避免拼接、复制时.trim()防不可见字符，且必须显式close()并监听onmessageerror以防静默失败。
频道名必须逐字符一致，大小写/空格错一个就收不到
浏览器对 BroadcastChannel 的频道名不做任何标准化处理：'auth' 和 'Auth' 是两个完全隔离的频道，'ui-theme '（末尾有空格）和 'ui-theme' 也无法通信。静默失败，不报错、不警告。
所有页面必须用同一常量定义频道名：
const CHANNEL_NAME = 'ui-theme';- 每个页面都写
new BroadcastChannel(CHANNEL_NAME)，别拼写、别拼接、别从配置里读（环境差异易出错） - 复制粘贴频道名时，加
.trim()防不可见字符：new BroadcastChannel(name.trim())
消息必须可结构化克隆，传函数或 event 就直接报 DataCloneError
postMessage() 底层走结构化克隆算法，只支持 JSON-safe 数据：plain object、array、string、number、boolean、null，不支持 function、undefined、Symbol、Promise、DOM node、循环引用对象。
- 发之前快速校验：
try { JSON.stringify(data) } catch (e) { /* 不可广播 */ } - 别传
event对象、Vue 组件实例、React state —— 它们含大量不可克隆属性 - 大状态（如整个 store）只传变更标识：
{ type: 'STATE_UPDATE', key: 'cart' }，接收方再自己拉取 - Chrome 限制约 1MB，Firefox 更严（约 64KB），超限会静默失败或抛
DataCloneError
新打开的标签页收不到历史消息，必须主动发 join 拉状态
BroadcastChannel 不缓存、不重试、不保序。刚打开的页面如果只监听 message，会错过所有已发生的登录登出、主题切换等状态变更。
立即学习“前端免费学习笔记（深入）”；
- 页面加载完成、
BroadcastChannel实例创建后，立刻发上线通知：bc.postMessage({ type: 'join', tabId: Date.now() + Math.random() }) - 其他页面监听到
type: 'join'时，主动触发一次状态同步（如调用fetch('/api/user')或读 localStorage） - 不要依赖
localStorage + storage事件兜底——容易和BroadcastChannel形成循环触发
必须显式 close()，否则 Safari/旧 Edge 可能内存泄漏或后续创建失败
忘记调用 bc.close() 不只是浪费内存。在 Safari 和旧版 Edge 中，页面卸载后 channel 实例可能驻留，导致后续同名 channel 创建时抛 InvalidStateError 或静默失败。
- 在
beforeunload中调用：window.addEventListener('beforeunload', () => bc.close()) - SPA 路由切换或组件卸载时也要 close（比如 Vue
onUnmounted、ReactuseEffect清理函数） - 避免反复 new 实例：封装单例，例如
const bc = window.bc ?? (window.bc = new BroadcastChannel('auth')) - 务必监听
onmessageerror：bc.onmessageerror = e => console.warn('BroadcastChannel parse error:', e)，否则非法消息会被吞掉，排查无从下手
最常被忽略的是「新页面必须主动拉状态」和「close 必须显式调用」——这两个点不处理，上线后大概率出现标签页状态不同步、内存持续增长、热更新后消息重复触发等问题。
