先聊聊为什么要用 navigator.sendBeacon

说实话，页面要是关了数据还没来得及上报，那算啥子埋点啊。

哈哈，这事儿我也踩过坑，等页面 unload 的时候用普通 XHR，结果请求被直接丢掉。

那你想啊，用户点了关闭，浏览器心里想：“哎呀，我忙着销毁呢，你这请求先放一边吧”。

于是就有了 sendBeacon，这玩意儿专门给“页面要挂了还想把Zui后的情报送出去”设计的。

咱就是说它会把数据塞进浏览器的后台队列，哪怕页面Yi经死翘翘，也会悄悄把请求完成。

sendBeacon 基本使用姿势

先抛出Zui基础的写法：

const url = '/log';
const payload = JSON.stringify});
navigator.sendBeacon;

不对不对，上面那段代码虽然Neng跑，但默认 Content‑Type 是 text/plain，后端要是硬要解析 JSON，就会抓狂。

所以geng靠谱的写法是——

const data = {event: 'exit', ts: performance.now};
const blob = new Blob], {type: 'application/json'});
navigator.sendBeacon;

kan，这里我们用了 Blob 把 MIME 类型强制成 application/json，后端直接 parse 就行。

FormData 场景也Neng搞定

Ru果你要上传文件或者模拟表单提交，直接给它一个 FormData 对象就行啦。

const fd = new FormData;
fd.append;
fd.append;
navigator.sendBeacon;

浏览器会自动帮你打上 multipart/form-data 的头，省事儿！

跨域时的“万Neng钥匙”——1px 图片兜底方案

说到跨域，有时候 sendBeacon 会因为 CORS 被卡住这时候咱们Ke以回退到老办法：1×1 像素图片。

原理hen简单：图片加载本身不受同源策略限制，只要服务器返回个透明 GIF，就算是成功埋点。

// 简单版 img 埋点
function beaconByImg {
    const qs = Object.keys
        .map+'='+encodeURIComponent)
        .join;
    const img = new Image;
    img.onload =  => console.log;
    img.onerror =  => console.warn;
    img.src = `${url}?${qs}&_t=${Date.now}`;
}

注意哈，URL 长度有限制，一般别超过 2KB，要不然就被裁剪掉了。

常见坑 & 防坑指南

只Neng POST：别指望 get Neng跑，用它只Neng是 POST 请求。

返回值只有 true/false：true 只代表Yi加入发送队列，不代表真的发出去。网络挂掉的话，它还是 false？呵呵，不管啦。

CORS 必须配合：CORS 头必须在响应里加 Access‑Control‑Allow‑Origin，否则 sendBeacon 会默默失效。

大小限制：大多数浏览器把单次 payload 限在 ~64KB 左右，超了就会被直接丢弃。别一次性塞太多日志进去。

No custom headers：AFAIK，你根本改不了 Content‑Type 除非自己造 Blob。想加 Authorization 那只Neng靠 cookie 或者凭证 URL 参数。

调试技巧小贴士

Chrome DevTools → Network → 勾选 “Preserve log”。打开页面 unload 时刷新一下就Nengkan到 sendBeacon 发出的请求。

Ru果kan不到，那可Neng是：

CORS 没配好，被浏览器直接拦住；

The payload 不是合法类型，比如直接传对象而忘记 stringify；

The page真的太快关闭了Ke以在 unload 前稍微 delay 一下。

性Neng优化小技巧，让埋点geng“轻盈”

#1 合并批量数据 别每一次点击dou立马发一次 beacon，把同一时间段的事件聚合成一个对象再一起发。这样既省流量，又提升成功率。

#2 使用 Transferable 对象 Ru果你的数据Yi经是 ArrayBuffer，Ke以直接传过去，不需要再拷贝一遍。浏览器内部会搬走所有权，geng省内存。

#3 合理设置缓存 对于图片兜底方案，Ru果服务器返回的是相同的透明 GIF，Ke以在响应头加 Cache-Control: max-age=31536000，让浏览器复用图片资源，减少 DNS/握手开销。

a/b 测试一下哪个geng稳？

BFF 那边Ke以同时记录两种方式的成功率，然后根据实际数据决定主力方案。别光听我瞎掰，用真实监控说话！你懂的。

实战案例：记录页面停留时长 + Zui后一次点击按钮 ID

// 页面入口
let startTime = performance.now;
// 挂载卸载监听
window.addEventListener => {
    const duration = Math.round - startTime);
    const lastBtn = document.querySelectorAll
        .length ? document.querySelectorAll
          .id : '';
    const data = {
        url: location.href,
        stay: duration,
        lastBtnId: lastBtn,
        ts: Date.now
    };
    // 用 Blob 发 JSON
    const blob = new Blob], {type:'application/json'});
    const ok = navigator.sendBeacon;
    if  {
        // fallback to img
        beaconByImg;
    }
});

# 小结 咱们今天聊了：

- 为啥要用 sendBeacon；

- 正确传 JSON 的方式和 FormData 用法；

- 跨域兜底的 1×1 图片方案；

\

- 常见坑、调试技巧和性Neng优化点；

\

- 一个完整实战例子。

\

说实话，只要掌握这些基本原则，你在任何项目里douNeng让埋点“稳如老狗”。哈哈，有什么疑问或者踩到坑了随时来聊哈！祝你玩得开心~

---