前端数据可靠传输：Beacon API与Fetch keepalive实战

1. 页面关闭时的数据丢失问题：从现象到本质

上周和数据分析团队的一次对话让我印象深刻——"我们的移动端埋点数据总是莫名其妙丢失15%左右，特别是用户快速滑动关闭标签页的时候"。这个现象背后隐藏着一个经典的前端难题：如何在页面生命周期结束时可靠地发送数据。

传统方案是在beforeunload或unload事件中使用同步XHR发送请求，但这种粗暴的方式会带来两个严重问题：

1. 用户体验灾难：同步请求会阻塞页面卸载流程，导致浏览器出现"此页面正在阻止您离开"的警告弹窗。在移动端，这种卡顿感会让用户误以为应用崩溃。

2. 逐渐失效：现代浏览器如Chrome 80+已开始限制同步XHR的使用，Safari等浏览器甚至会直接忽略卸载事件中的同步请求。

关键理解：浏览器对待页面卸载的态度就像对待即将沉没的轮船——它会优先确保乘客（主线程）安全撤离，而不是等待货物（未完成请求）全部装船。

2. 现代浏览器的解决方案架构

2.1 Beacon API的设计哲学

navigator.sendBeacon()是W3C专门为这种"最后一公里"数据传输设计的API。它的核心设计原则体现在三个方面：

1. 非阻塞性：请求被移交给浏览器专属的低优先级队列，不占用主线程资源
2. 尽力而为：浏览器承诺会尝试发送，但不保证送达（类似UDP协议）
3. 容量控制：单个请求大小通常限制在64KB以内

javascript复制// 典型埋点实现示例
window.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    const analyticsData = {
      page: location.pathname,
      dwellTime: Date.now() - pageEnterTime,
      referrer: document.referrer
    };
    navigator.sendBeacon('/analytics', JSON.stringify(analyticsData));
  }
});

2.2 Fetch keepalive的进阶能力

2018年引入的fetch with keepalive提供了更灵活的方案：

javascript复制// 带认证头的上报示例
fetch('/api/analytics', {
  method: 'POST',
  body: JSON.stringify({/* 数据 */}),
  headers: new Headers({
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  }),
  keepalive: true
});

与sendBeacon的关键差异点：