shared worker 是实现多视窗联动看板最轻量、最可控的纯前端方案，通过单实例驻留、端口隔离与全局广播双模式、零冗余连接及脱离 dom 的逻辑中枢设计，统一管理状态、分发指令、同步数据。
Shared Worker 是实现多视窗联动看板最轻量、最可控的纯前端方案——它让所有同源标签页共享一个后台线程，统一管理状态、分发指令、同步数据，无需后端参与，也不依赖轮询或广播通道的弱状态特性。
为什么 Shared Worker 特别适合超大控制台看板
超大前端看板常由多个独立窗口/标签页组成（如：主监控页、告警弹窗、数据明细页、操作控制台），它们需实时保持一致的连接状态、全局配置、刷新节奏和用户权限。Shared Worker 天然匹配这类需求：
- 单实例长期驻留：只要任一窗口开着，Worker 就持续运行，避免 WebSocket 重复连接、定时器重复启动、token 过期不同步等问题
- 端口隔离 + 全局广播双模式：既能向指定窗口发控制指令（如“暂停所有图表动画”），也能向全部窗口广播数据更新（如“新告警ID:ALERT-20260523-087”）
- 内存与连接零冗余：5个窗口共用1个 WebSocket、1套心跳逻辑、1份缓存版本号，实测内存占用比传统方案降低65%以上
- 完全脱离 DOM：Worker 中不操作 UI，只做逻辑中枢，保障主线程渲染稳定，尤其适合高刷新率的实时图表看板
核心模块设计：三类消息路由必须支持
一个实用的看板级 Shared Worker 脚本（如 dashboard-center.js）应明确划分三类通信入口：
- 状态同步类（type: 'sync_state'）：接收各窗口上报的本地状态（如当前选中设备ID、时间范围、主题色），合并为全局快照，再广播给所有活跃端口
- 指令分发类（type: 'dispatch_cmd'）：主控窗口发送命令（如 {cmd: 'export_csv', target: 'traffic-table'}），Worker 校验权限后定向投递给对应窗口的 port
- 数据中继类（type: 'relay_data'）：对接后端 SSE 或 WebSocket 的单一长连接，收到原始数据后按字段、标签、权限规则过滤，再分发到订阅了该数据流的窗口
落地关键细节：避免常见断连与竞态
多视窗场景下，窗口频繁打开/关闭、网络抖动、页面卸载未清理端口，都易导致 Worker 行为异常。需主动防护：
- 每个 port 连接时生成唯一 clientID，并在 onmessage 中校验 type 字段是否存在，非法消息直接忽略，防止恶意脚本注入
- 监听 port.onclose，在端口关闭时从内部 ports Set 中移除；配合 setInterval 每30秒扫描一次存活端口，清理已失效引用
- 对共享状态（如全局刷新开关、当前登录用户）使用结构化克隆 + 深比较更新，避免 Object.assign 导致的引用污染
- 主窗口首次加载时主动调用 port.postMessage({type: 'init', version: 'v2.4.1'})，Worker 收到后才开始接受其他消息，确保初始化顺序
与 BroadcastChannel 的协同使用建议
Shared Worker 负责有状态、需响应、需路由的“重逻辑”，BroadcastChannel 则适合无状态、低延迟的“轻通知”：
- 用 Shared Worker 管理 WebSocket 连接、用户会话、图表数据流订阅关系
- 用 BroadcastChannel 发送瞬时 UI 提示（如“主控台已接管所有窗口”、“检测到新版本，点击重启”），不经过 Worker 队列，更及时
- 两者 channel 名称/worker 路径保持统一命名规范（如 dashboard:control、dashboard:data），便于调试与监控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
