sendBeacon 是 navigator 提供的专用于页面卸载前可靠发送小量数据的方法，它由浏览器后台异步执行、不阻塞卸载、支持 64KB 内数据，参数为 URL 和 ArrayBuffer/Blob/FormData/URLSearchParams/字符串，推荐用 URLSearchParams 或 JSON 字符串，在 visibilitychange 中调用更稳妥，返回布尔值但无送达反馈，需服务端幂等处理，IE 不支持需降级。
sendBeacon 是 navigator 对象提供的一个关键方法，专为页面卸载（如关闭、刷新、跳转）前发送小量数据而设计，比 fetch 或 XMLHttpRequest 更可靠——它不依赖请求完成，浏览器会在后台异步发送，即使页面已销毁也能确保发出。
为什么用 sendBeacon 而不用其他方式？
传统 AJAX 在 beforeunload 或 unload 中发起请求常失败：浏览器可能直接终止连接；同步请求会阻塞卸载、卡顿体验；异步请求则大概率被丢弃。而 sendBeacon 由浏览器接管生命周期，只要数据不超过 64KB（多数埋点够用），就能排队发完。
基本用法：构造数据并调用
它接受两个参数：目标 URL 和要发送的数据（支持 ArrayBuffer、Blob、FormData、URLSearchParams 或字符串）。推荐用 URLSearchParams 或 JSON 字符串，轻量且兼容性好：
- 先收集埋点字段（如页面路径、停留时长、用户 ID、事件类型）
- 序列化为键值对或 JSON 字符串
- 在
visibilitychange（隐藏）或beforeunload中调用navigator.sendBeacon(url, data)
示例：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记（深入）”；
const data = new URLSearchParams({page: location.pathname,
duration: Math.round(performance.now() - startTime),
uid: 'u12345'
});
navigator.sendBeacon('/log', data);
最佳实践与注意事项
-
监听 visibilitychange 更稳妥：比
beforeunload触发更早、更稳定，尤其对移动端切后台、PC 切换标签页有效 - 避免在 unload 中调用：该事件已不保证执行，Chrome 等现代浏览器已限制其行为
-
服务端需支持接收 POST 请求：beacon 默认以
POST发送，Content-Type 为text/plain（若传字符串）或application/x-www-form-urlencoded（URLSearchParams） - 失败不报错也不回调：sendBeacon 返回布尔值（true 表示入队成功），但无法得知是否送达；需服务端做好幂等和重试兜底
兼容性与降级方案
IE 不支持，Safari 旧版本有 bug（如 iOS 10.3+ 才稳定）。可简单检测：
if (navigator.sendBeacon) {// 使用 sendBeacon
} else {
// 降级：尝试 image src 或 fetch + keepalive（仅部分支持）
new Image().src = '/log?' + params;
}
注意：image 方案只支持 GET，且无状态、难调试，仅作兜底，不应作为主力。
