navigator.sendbeacon 关键在于由浏览器后台线程在卸载后尽力发送，应监听 pagehide 事件（排除 bfcache 场景），传 blob 或 urlsearchparams 数据，遵守同源与大小限制，不依赖响应，并对旧浏览器降级为 image 打点。
用 navigator.sendBeacon 发送埋点数据，关键不是“关页面那一瞬发出去”，而是让浏览器接管发送时机——它会在页面卸载后、进程退出前，由后台线程尽力完成传输。只要调用成功（返回 true），浏览器就承诺尝试送达，不卡界面、不丢上下文。
选对事件：优先监听 pagehide，而非 unload 或 beforeunload
pagehide 是最稳妥的触发点：它在页面真正不可见时触发（包括刷新、跳转、关闭、进入 bfcache），且所有现代浏览器（含 iOS Safari）都支持良好。unload 在移动端常被忽略；beforeunload 会强制弹窗、无法获知用户选择，还可能被禁用。
- 监听
pagehide，检查event.persisted === false再发送——若为true，说明页面进了往返缓存（bfcache），并未真正离开，通常无需上报 - 避免在
beforeunload中调用 sendBeacon，该事件本意是让用户确认是否离开，不适合做异步数据上报
构造合适的数据：用 Blob 或 URLSearchParams，别直接传对象
sendBeacon 只接受 ArrayBufferView、Blob、DOMString 或 FormData。直接传 JS 对象会失败；用 JSON.stringify() 得到字符串虽可行，但服务端需明确按 text/plain 解析。更推荐：
- 用
new Blob([JSON.stringify(data)], {type: 'application/json'})—— 后端能按标准 JSON 处理 - 或用
new URLSearchParams(data)（data 是键值对对象）—— 自动设为application/x-www-form-urlencoded，兼容性极佳 - 避免 FormData，除非真要上传文件；它会带 boundary，增加体积且部分后端解析麻烦
确保请求可达：注意同源与大小限制
sendBeacon 遵守同源策略，目标 URL 必须与当前页面同协议、域名、端口。跨域需后端配 CORS，但 sendBeacon 本身不触发预检，所以只支持简单请求（如 POST + text/plain 或 application/x-www-form-urlencoded）。
- 单次数据建议控制在 64KB 以内（Chrome 实测上限约 256KB，但 Safari 和旧版 Android 更严）
- 埋点字段精简：去掉冗余字段，用短 key（如
pg代替page），时间戳用毫秒整数而非 ISO 字符串 - 不要依赖响应：sendBeacon 没有回调，也无法读取状态码；服务端收到即记录，前端不做重试逻辑
兜底兼容：检测 API 存在性，旧环境降级处理
IE 完全不支持，部分老旧 Android 浏览器也缺失。可加一层判断，降级为 Image 像素打点（仅 GET，适合极简日志）或同步 XHR（仅作最后保障，慎用）：
- 先判断
if ('sendBeacon' in navigator)，成立则走主流程 - 否则尝试
new Image().src = '/log?' + new URLSearchParams(data)，适合无敏感内容、低精度统计 - 避免在生产环境使用同步 XHR，它会冻结 UI，Chrome 已限制其在 unload 中的行为
