window.onpagehide埋点实现方案

在移动端实现可靠页面退出埋点，`pagehide` 是当前唯一可行的核心入口，它能有效绕过 iOS Safari 和微信 WebView 中 `unload` 完全失效、`beforeunload` 不触发、`visibilitychange` 无法区分真关闭等致命缺陷；关键在于严格结合 `event.persisted === false` 与 `document.visibilityState === 'hidden'` 双重判断确保只捕获真实卸载，配合 `navigator.sendBeacon` 异步可靠上报（注意 payload 类型、大小及同源限制），并协同监听 `freeze` 事件以应对 JS 环境被瞬间冻结的极端场景——真正挑战不在于监听哪个事件，而是在毫秒级窗口内完成状态同步序列化与提交，避开浏览器策略拦截与执行环境中断，从而堵住传统方案中高达90%以上的埋点丢失漏洞。

pagehide 是目前在移动端实现可靠退出埋点的唯一可行入口，unload 在 iOS Safari 和微信 WebView 中基本不触发或被静默忽略，强行用它会导致大量埋点丢失。

为什么 unload 在移动端完全不可靠

现代移动端浏览器（Chrome Android、Safari iOS、微信内置 WebView）普遍启用 bfcache（back/forward cache），用户按返回键、切后台、甚至从微信跳转到其他小程序时，页面常被冻结而非销毁。unload 一触发，bfcache 就失效，导致后续返回必须重刷；更关键的是，它在 iOS Safari 中根本不会执行异步逻辑（比如 fetch 或 XMLHttpRequest），连 sendBeacon 都可能被跳过。

• beforeunload 在微信和部分安卓 WebView 中压根不触发，且 Chrome 已禁用自定义提示文案
• visibilitychange 仅反映标签页可见性，无法区分“切后台”和“真关闭”，iOS 微信中切后台后仍为 visible
• onUnmounted（Vue）或 componentWillUnmount（React）只响应路由跳转，对关闭 Tab、杀进程、外链跳转完全无感

监听 pagehide 并正确判断 event.persisted

必须检查 event.persisted 值，否则会在每次进入 bfcache 时重复上报，污染数据且浪费资源。只有 event.persisted === false 才代表页面即将彻底卸载——这才是埋点的唯一合法时机。

• 不要写成 window.addEventListener('pagehide', saveExitData) 这种无条件调用
• 正确写法：if (!event.persisted) { navigator.sendBeacon('/log', data); }
• Safari 触发 pagehide 极其激进（App 切后台就发），建议加一层 document.visibilityState === 'hidden' 双重确认
• 避免在回调里调用 alert、confirm、window.open —— 全部静默失败

用 navigator.sendBeacon 发送数据的硬性约束

sendBeacon 不是“立刻发出去”，而是交由浏览器后台线程在进程退出前尽力投递。它成功返回 true 仅代表注册成功，不代表已送达；失败则返回 false，需降级处理。

• 只支持同源 URL，且 payload 大小建议控制在 64KB 以内（iOS Safari 实测上限约 32KB）
• 数据类型只能是 Blob、ArrayBuffer、TypedArray、USVString 或 FormData；不要传对象字面量
• 不要依赖响应：服务器不能做重定向、不能设超时、不能要求鉴权头（CORS 不适用）
• 旧浏览器兜底方案：创建 new Image().src = '/log?data=xxx'，但仅限 GET 且有长度限制

与 freeze 事件协同防漏报

iOS Safari 和新版 Chrome 会先触发 freeze（JS 执行暂停），再发 pagehide。如果只监听后者，某些极端场景（如快速双击 Home 键）可能导致 pagehide 来不及执行就被冻结。

• 务必同时监听：window.addEventListener('freeze', () => saveState())
• 在 pagehide 回调中加守卫：if (!frozen && !event.persisted) saveState()
• freeze 触发后 JS 立即暂停，所以所有保存逻辑必须是同步的（不能含 await、Promise.then）
• 不要在 freeze 中尝试 DOM 操作或读取 localStorage —— iOS 下可能已不可访问

真正难的不是监听哪个事件，而是在 JS 执行环境随时可能被冻结、中断、清空的前提下，把状态序列化、压缩、校验、提交这一整条链路压进毫秒级窗口。多数漏报不是代码没写，而是写在了错误的执行时机或用了被浏览器策略拦截的 API。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《window.onpagehide埋点实现方案》文章吧，也可关注golang学习网公众号了解相关技术文章。