Shared Worker 是唯一能跨标签页、iframe 和多窗口统一协调前端埋点的机制，通过集中调度、状态感知与生命周期联动实现合理批量上报，避免重复、丢失与无效请求。

Shared Worker 是目前唯一能跨标签页、iframe 和多窗口统一协调前端埋点行为的机制。它不直接“排空队列”，而是通过集中调度、状态感知与生命周期联动，让埋点数据在最合理的时间点批量发出，既避免重复上报、丢失关键事件，又减少无效请求和后台耗电。

为什么不能每个页面自己 flush 埋点队列

埋点队列通常缓存用户行为（如点击、停留、曝光），等待合适时机批量上报。若每个页面独立 flush：

• 同一用户打开 5 个标签页，可能在 1 秒内触发 5 次相同事件（如“首页曝光”）的重复上报
• 页面切后台时，主线程定时器被冻结或大幅降频，导致埋点积压甚至永久丢失
• 页面意外崩溃或强制关闭，未 flush 的数据彻底消失，无兜底机制
• 多个页面同时 flush，易触发服务端限流或写入抖动

Shared Worker 如何接管埋点排空逻辑

核心思路是：把“何时发”从页面侧上收，由 Shared Worker 统一判断上下文状态，并按策略触发 flush。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

• 页面只负责投递：各页面调用 port.postMessage({ type: "track", event: {...} })，Worker 将事件暂存至 Map，不立即发送
• 监听可见性变化：Shared Worker 无法直接访问 document，但可通过页面广播告知 visibility 状态 —— 页面监听 document.visibilityState，切到 hidden 时广播 { type: "visibility", state: "hidden" }，Worker 收到后触发一次 flush
• 绑定页面生命周期：页面卸载前（beforeunload 或 pagehide）主动发 { type: "flush-now", reason: "page-close" }，Worker 立即合并当前 clientId 下所有事件并上报
• 设置静默超时兜底：Worker 内维护每个 clientId 的最后活跃时间戳，若 15 秒内无新事件且无 visibility 变化，则自动 flush，防止长期积压

关键细节与容错设计

排空不是简单“清空数组”，而是一次带语义的聚合动作：

立即学习“前端免费学习笔记（深入）”；

• 上报前对同类型事件去重（如连续 3 次“按钮点击”可合并为 count=3）
• 携带统一 traceId 与 clientId，便于服务端识别是否来自同一用户多视窗会话
• 失败时本地暂存（可用 IndexedDB 或 localStorage），待下次联网或页面激活时重试
• Worker 自身关闭前（最后一个同源页面关闭），遍历所有 clientId 的缓存，执行最终 flush

兼容性与降级路径

Safari 16.3 及更早版本不支持 Shared Worker，需 fallback：

• 检测 typeof SharedWorker === 'function'，不可用时启用 BroadcastChannel + 主控页模式
• 首个激活页面成为主控页，负责监听 visibility 和页面卸载，并通过 BroadcastChannel 广播 flush 指令
• 其他页面只接收指令、提交本地队列，不主动触发 flush