页面关闭时,如何确保使用navigator.sendBeacon准确上报埋点数据?
- 内容介绍
- 相关推荐
本文共计956个文字,预计阅读时间需要4分钟。
无法依赖` navigator.sendBeacon 本身确保可靠性,它仅保证数据入队,不保证送达;真正能提升成功率的是选择合适的事件、构造合理的统计数据、避开浏览器执行限制。
为什么在 unload 里调用 sendBeacon 还是发不出去
因为 unload 在 Safari、iOS 和 bfcache 场景下常被跳过或中断执行,浏览器根本不给 JS 执行机会。Chrome 80+ 之后更会直接冻结上下文,同步阻塞或长任务(比如 JSON.stringify 大对象)会导致调用直接失效。
- 优先监听
pagehide,并检查event.persisted === false:为true表示进了往返缓存(bfcache),页面没真关,通常不该发 - 避免同时监听
beforeunload和pagehide:两者时机冲突,反而增加竞态失败概率 - 不要在事件回调里做耗时操作:如
alert()、while循环、awaitPromise,浏览器只给 ≤100ms 的异步窗口
哪些 data 类型能用,哪些会静默失败
navigator.sendBeacon 对参数类型有硬性要求,传错类型不报错,只返回 false,且控制台无提示。
本文共计956个文字,预计阅读时间需要4分钟。
无法依赖` navigator.sendBeacon 本身确保可靠性,它仅保证数据入队,不保证送达;真正能提升成功率的是选择合适的事件、构造合理的统计数据、避开浏览器执行限制。
为什么在 unload 里调用 sendBeacon 还是发不出去
因为 unload 在 Safari、iOS 和 bfcache 场景下常被跳过或中断执行,浏览器根本不给 JS 执行机会。Chrome 80+ 之后更会直接冻结上下文,同步阻塞或长任务(比如 JSON.stringify 大对象)会导致调用直接失效。
- 优先监听
pagehide,并检查event.persisted === false:为true表示进了往返缓存(bfcache),页面没真关,通常不该发 - 避免同时监听
beforeunload和pagehide:两者时机冲突,反而增加竞态失败概率 - 不要在事件回调里做耗时操作:如
alert()、while循环、awaitPromise,浏览器只给 ≤100ms 的异步窗口
哪些 data 类型能用,哪些会静默失败
navigator.sendBeacon 对参数类型有硬性要求,传错类型不报错,只返回 false,且控制台无提示。

