SharedWorker 跨标签页共享连接：资源复用与并发治理实践

背景与价值多标签页同时连接后端会造成资源浪费与竞态；共享连接降低压力并统一调度。启动与连接// main.js const worker = new SharedWorker('/shared.js'); worker.port.start(); worker.port.postMessage({ type: 'join' }); worker.port.onmessage = (e) => handle(e.data); 共享端实现// shared.js const ports = []; let ws; onconnect = (e) => { const port = e.ports[0]; ports.push(port); port.onmessage = (msg) => { const data = msg.data; if (data.type === 'join') { if (!ws) { ws = new WebSocket('wss://example.com'); ws.onmessage = (m) => broadcast(m.data); } } }; port.start(); }; function broadcast(data) { for (const p of ports) p.postMessage(data); } 指标验证（Chrome 128/Edge 130）连接数量：多标签页复用后下降至 1；服务器会话压力下降 60%–80%。稳定性：断线重连一致，由 SharedWorker 统一处理；无竞态。回退策略不支持环境：回退为 BroadcastChannel + 每页独立连接并限流。测试清单多页同步：消息广播与状态一致；连接仅保持一条。弱网重连：统一重连策略生效，所有页面状态恢复。