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 字符串，轻量且兼容性好：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 先收集埋点字段（如页面路径、停留时长、用户 ID、事件类型）
- 序列化为键值对或 JSON 字符串
- 在
visibilitychange（隐藏）或beforeunload中调用navigator.sendBeacon(url, data)
示例：
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，且无状态、难调试，仅作兜底，不应作为主力。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
