为何普通请求在页面关闭时容易失败
当用户关闭页面、切换选项卡，或退出浏览器时，传统的异步请求（如 fetch 或 XMLHttpRequest）极易被中断，导致数据未成功传输。浏览器在卸载页面过程中不会等待这些请求完成，造成分析统计、用户行为或状态同步无法及时送达服务器。
为何 navigator.sendBeacon 是首选方案
Beacon API 专为此类场景设计，可在页面加载完成后并即将被卸载时，异步发送小体积数据而不会阻塞页面关闭流程。相比传统 AJAX，它更可靠且不会影响用户体验。
最佳实践：通过 Page Visibility 与 sendBeacon 确保数据发送
使用 visibilitychange 事件作为触发信号
当页面从可见状态切换到不可见（例如用户切换标签页或关闭）时，触发 visibilitychange。此时调用 sendBeacon 发送数据最为可靠。
配合 beforeunload 作为备用方式
虽然 beforeunload（或 unload）事件不可靠，也可能影响浏览器性能，但在某些环境下仍能补充确保调用时机不被遗漏。建议串联两者一起使用以提高覆盖率。
示例代码结构如下：
function flushAnalytics() {
const payload = /* 构建你的数据 */;
navigator.sendBeacon('/log', JSON.stringify(payload));
}
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
flushAnalytics();
}
});
window.addEventListener('beforeunload', () => {
flushAnalytics();
});
采用此结构既能兼容多数浏览器情境，也能应对不同平台差异。
补充说明与注意事项
sendBeacon 仅适合发送小数据量（通常几十 KB）且不提供响应回调。
若需发送更大或有响应处理需求的数据，可考虑使用 fetch 搭配 keepalive 选项，但浏览器兼容性有限。
同时，某些特殊场景（如浏览器异常关闭或系统断电）仍可能导致请求失败，建议配合服务器端逻辑，通过定期心跳或后台会话检测进一步补偿。
为何推荐这种做法？
- 可靠性更高：相比传统方法，Beacon + 可见性监听减少丢失的请求概率。
- 性能影响极低：异步发送，不会拖慢页面关闭或影响后续操作。
- 实现简单：无需引入复杂依赖，少量代码即可部署。
在用户关闭浏览器前可靠地发送 HTTP 请求，既是数据完整性保障的重要手段，也是提升整体系统健壮性的关键一环。通过合理结合 navigator.sendBeacon 与 visibilitychange（辅以 beforeunload）事件，可以在不影响用户体验的前提下，大幅提升请求送达率。虽然极端情况下请求仍可能失败，但这种策略已是当前浏览器环境下最稳妥的实现方案。将其应用于数据上报、用户行为埋点、会话结束处理等场景，能显著增强应用的可靠性与洞察能力。