17370845950

Beacon API 是浏览器提供的卸载前可靠上报机制，通过 navigator.sendBeacon() 发送 POST 数据，不阻塞页面关闭，支持 Blob、FormData 等格式但不支持自定义 headers，无回调且有 64KB 大小限制。

Beacon API 是浏览器提供的一种专门用于在页面卸载前发送数据的机制，它能确保请求发出且不阻塞页面关闭或跳转。 它不是普通的异步请求（如 fetch 或 XMLHttpRequest），而是“尽力而为”的可靠上报方式——即使用户已关闭标签页、刷新页面或导航离开，浏览器仍会在后台尝试发送数据。

为什么普通异步请求在卸载时不可靠？

当用户触发页面卸载（比如点击链接、关闭标签、刷新、前进后退）时，浏览器会中止所有未完成的 fetch / XHR 请求。即使你用了 fetch(...).catch(...) 或设置了 timeout，这些请求大概率根本没发出去，或者被静默取消。

Beacon 则不同：调用 navigator.sendBeacon() 后，浏览器承诺将数据加入发送队列，并在当前页面彻底卸载前尽可能发出——不等待响应，不阻塞卸载流程，也不受页面状态影响。

如何使用 Beacon API 发送数据？

核心方法是 navigator.sendBeacon(url, data)，它只支持 POST 请求，且 data 类型受限：

• 支持 ArrayBufferView（如 Uint8Array）、Blob、FormData、URLSearchParams、字符串（自动设为 text/plain）
• 不支持直接传 JSON 对象；需先序列化为字符串或包装成 Blob/FormData
• 不能自定义 headers（如 Authorization、Content-Type 由浏览器自动设置）

简单示例：

// 记录用户停留时长（页面即将离开时上报）
window.addEventListener('beforeunload', () => {
  const data = JSON.stringify({
    page: window.location.href,
    duration: performance.now() - startTime
  });
  // 自动以 text/plain 发送
  navigator.sendBeacon('/log', data);
});

Beacon 的限制与注意事项

它不是万能的，实际使用中要注意这些边界：

• 仅限 POST 方法，无法发 GET 或带自定义头的请求
• 某些低版本浏览器不支持（Chrome 39+、Firefox 31+、Edge 18+、Safari 11.1+；iOS Safari 支持但旧版有 bug）
• 没有回调或 Promise，无法知道是否成功送达（只能服务端记录日志确认）
• 数据大小建议控制在 64KB 以内（部分浏览器有隐式限制）
• 若页面卸载过快（如强制 kill 进程），仍可能丢失（但概率远低于 fetch）

兼容性兜底方案（可选）

如果需要更高可靠性或更复杂数据格式，可组合使用：

• 优先用 sendBeacon
• 降级到 fetch(..., { keepalive: true })（部分浏览器支持，行为类似 beacon）
• 最后 fallback 为同步 XHR（xmlhttp.open(..., false)）——但会明显卡住页面，仅作极端保底，不推荐常规使用

检测支持性也很简单：

if (navigator.sendBeacon) {
  navigator.sendBeacon('/log', payload);
} else {
  // 尝试 fetch keepalive 或其他方案
}

基本上就这些。Beacon 不复杂但容易忽略，适合埋点、性能打点、用户行为收尾上报等「发了就好，不必等回执」的场景。