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 + 每页独立连接并限流。测试清单多页同步：消息广播与状态一致；连接仅保持一条。弱网重连：统一重连策略生效，所有页面状态恢复。