sharedworker 是 html5 提供的跨标签页共享线程机制，同源同 url 页面共用唯一实例，支持状态同步与消息中转；需主页面调用 new sharedworker() 并 start() 通信端口，worker 脚本监听 connect 事件并管理多端口收发；内部变量全局共享但无内置锁，需手动处理竞态；仅 https/localhost 可用，safari 16.4+ 支持。
SharedWorker 是 HTML5 提供的、让多个浏览器标签页（甚至不同窗口、iframe）共享同一个后台线程的机制。它不同于普通 Worker（每个页面独占一个实例），而是全局唯一——只要 URL 相同，所有同源页面都连接到同一个 SharedWorker 实例，从而实现跨标签页的状态同步、消息中转或资源复用。
SharedWorker 的基本使用流程
要启用共享线程，需两部分配合：主页面脚本 + 独立的 worker 脚本文件。
- 主页面通过
new SharedWorker('worker.js')创建连接，获取worker.port对象 - 必须显式调用
port.start()（若未设onmessage事件监听器）才能开启通信通道 - SharedWorker 脚本中监听
connect事件，拿到 port 后调用port.start()并绑定收发逻辑 - 多个页面可同时
port.postMessage()，SharedWorker 收到后可广播给所有已连接的 port，或按需分发
跨标签页共享状态的核心要点
SharedWorker 内部变量是真正共享的（比如计数器、缓存对象、WebSocket 连接），但要注意：
- 所有端口（port）共用同一执行上下文，变量声明在全局作用域即为“共享内存”
- 没有内置锁机制，多端口并发调用时需自行处理竞态（如用
self.clients列表做简单协调，或加标记位） - SharedWorker 不会因某个页面关闭而终止；只有当所有连接断开且无定时器/事件监听时，浏览器才可能回收它
- 可通过
self.clients.matchAll()获取当前活跃的客户端列表，用于广播或定向通信
常见应用场景示例
SharedWorker 特别适合需要轻量级协同的场景：
- 登录态同步：一个标签页退出登录，SharedWorker 通知其余标签页自动跳转或刷新状态
- 实时计数器：如“当前有 X 人正在编辑文档”，各标签页上报进入/离开，SharedWorker 统一维护并广播
- 消息中转中心：页面 A 发送消息给页面 B，不直接通信，而是经 SharedWorker 路由（适用于无引用关系的标签页）
- 统一 API 请求代理：避免多个标签页重复拉取相同配置或用户信息，SharedWorker 缓存并响应各端口请求
注意事项与兼容性提醒
SharedWorker 功能强大，但实际落地需留意限制：
- 仅支持 HTTPS 或
localhost（非安全上下文下会被禁用） - Firefox、Chrome、Edge 支持良好；Safari 从 iOS 16.4 / macOS 13.3 开始支持，旧版本不支持
- 不能访问 DOM、
window、document，只能使用 Web Worker 允许的 API（如 fetch、IndexedDB、setTimeout） - 调试较困难：Chrome DevTools 的 Application → Shared Workers 面板可查看运行状态和端口连接，但断点需在 worker 脚本中设置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
