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

--- title: Navigator.sendBeacon：轻量上报与回退策略 keywords: - sendBeacon - 后台上报 - 轻量请求 - 上报治理 - 回退 description: 使用 `navigator.sendBeacon` 在页面卸载等场景进行轻量上报，保证可靠性并提供与 keepalive 的选型与回退策略。 tags: - sendBeacon - 上报治理 - 后台上报 - 回退 - 性能 - 监控 - 网络 - 轻量请求 categories: - 文章资讯 - 技术教程 --- ## 概述 `sendBeacon(url, data)` 发送异步、低优先级、可靠的上报请求，适用于卸载与后台。浏览器会在合适时机发送，避免阻塞导航。 ## 用法/示例 ```js 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