Navigator.sendBeacon：轻量上报与回退策略

---

title: Navigator.sendBeacon：轻量上报与回退策略

keywords:

• sendBeacon
• 后台上报
• 轻量请求
• 上报治理
• 回退

description: 使用 navigator.sendBeacon 在页面卸载等场景进行轻量上报，保证可靠性并提供与 keepalive 的选型与回退策略。

tags:

• sendBeacon
• 上报治理
• 后台上报
• 回退
• 性能
• 监控
• 网络
• 轻量请求

categories:

• 文章资讯
• 技术教程

---

概述

sendBeacon(url, data) 发送异步、低优先级、可靠的上报请求，适用于卸载与后台。浏览器会在合适时机发送，避免阻塞导航。

用法/示例

addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/rum', JSON.stringify(metrics))
  }
})

工程建议

• 控制 payload 大小并使用压缩；与 fetch keepalive 比较选择合适方案。
• 对失败在下次会话补偿；记录成功率与设备差异用于治理。
• 在不支持环境降级到同步或延后上报（前台发送）。

参考与验证

• MDN：navigator.sendBeacon — https://developer.mozilla.org/docs/Web/API/Navigator/sendBeacon