Beacon API 与 keepalive 标志：确保页面卸载时的埋点数据不丢失
大家好，我是你们今天的讲师。今天我们来深入探讨一个在现代 Web 开发中非常关键但又常常被忽视的问题：如何确保用户离开页面时，关键的埋点数据（比如点击、转化、行为日志）不会因为浏览器的快速卸载而丢失？
这个问题看似简单，实则涉及浏览器生命周期管理、网络请求机制以及开发者对底层协议的理解。如果你正在做数据分析、用户行为追踪或 A/B 测试系统，这篇文章你一定不能错过。
一、问题背景：为什么页面卸载会导致数据丢失？
当我们打开一个网页时，浏览器会加载 HTML、CSS、JS，并执行各种逻辑。一旦用户关闭标签页、刷新页面或导航到其他站点，浏览器就会触发 beforeunload 或 pagehide 事件，随后开始“卸载”当前页面资源。
这时候会发生什么？
- 页面中的 JS 执行线程会被中断；
- 即使你写了
fetch()或XMLHttpRequest发送数据，如果请求还没完成，浏览器可能会直接终止它； - 更糟糕的是，有些浏览器（尤其是 Chrome）为了提升性能，在某些情况下甚至会在
beforeunload中静默丢弃所有未完成的网络请求，哪怕它们是fetch()调用！
这就导致了一个常见场景：
用户点击了一个按钮，触发了埋点上报，但因为页面刚加载完就跳转了，请求根本没发出去 —— 数据丢失！
🧠 真实案例：
假设你在做一个电商网站，用户点了“加入购物车”，你想记录这个动作。但如果此时用户立刻关闭页面，或者点击了外部链接跳转，你的服务器可能永远收不到这条记录。
这不仅影响统计准确性，还可能导致用户画像失真、漏斗分析错误，甚至影响推荐算法的效果。
二、解决方案：Beacon API + keepalive 标志
要解决这个问题，我们需要一个能“无视页面卸载”的机制。幸运的是，HTML5 提供了一个专门为此设计的 API：navigator.sendBeacon()。
✅ Beacon API 是什么？
这是浏览器原生提供的一个方法，用于在页面卸载时发送少量数据（最多 64KB），并且即使页面已经关闭，也能保证请求发出。
它的语法如下：
navigator.sendBeacon(url, data);url: 目标服务器地址（必须同源或使用 CORS）data: 可以是字符串、Blob、FormData 等类型的数据体
⚠️ 注意事项：
- 请求是异步的，不会阻塞页面卸载；
- 请求不可取消（即无法 abort）；
- 最大 payload 大小限制为 64KB（大多数埋点场景足够）；
- 必须在
beforeunload/pagehide事件中调用才有效。
🔑 关键特性：keepalive 标志
这就是我们今天的核心主角 —— keepalive 参数！
在新版浏览器中（Chrome 83+, Firefox 79+），你可以这样使用：
navigator.sendBeacon(url, data, { keepalive: true });这个参数的作用是什么？
| 特性 | 默认行为（无 keepalive） | 使用 keepalive 后 |
|---|---|---|
| 是否受页面卸载影响 | ❌ 会被中断 | ✅ 不受影响 |
| 请求是否可靠 | ❗ 可能失败 | ✅ 高概率成功 |
| 是否支持跨域 | ❌ 不支持（需 CORS） | ✅ 支持（需 CORS） |
| 请求优先级 | 低 | 中等（类似 fetch 的高优先级） |
💡
keepalive: true表示：即使页面已经卸载，浏览器也会尝试将请求发送出去，直到超时或失败为止。
这正是我们想要的！它解决了传统 fetch() 在卸载时被强制中断的问题。
三、实战代码演示：如何正确实现埋点上报
下面我们通过一个完整的例子来展示如何利用 Beacon API 和 keepalive 来安全地发送埋点数据。
示例场景：用户点击按钮后记录行为日志
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>埋点上报测试</title>
</head>
<body>
<button id="trackBtn">点击我记录埋点</button>
<script>
const trackBtn = document.getElementById('trackBtn');
// 模拟埋点数据结构
function sendTrackingEvent(eventType, extraData = {}) {
const payload = {
type: eventType,
timestamp: Date.now(),
userAgent: navigator.userAgent,
url: window.location.href,
...extraData
};
// 使用 sendBeacon + keepalive
const success = navigator.sendBeacon(
'/api/track',
JSON.stringify(payload),
{ keepalive: true }
);
if (!success) {
console.warn('Beacon 发送失败，可能是浏览器不支持或网络异常');
} else {
console.log(`埋点 ${eventType} 已成功提交`);
}
}
// 绑定点击事件
trackBtn.addEventListener('click', () => {
sendTrackingEvent('button_click', { button_id: 'buy_now' });
});
// 页面卸载时自动触发埋点（例如用户直接关闭标签页）
window.addEventListener('beforeunload', (e) => {
sendTrackingEvent('page_exit', { exit_reason: 'tab_close' });
});
// 页面隐藏时也触发（适用于多标签页切换）
window.addEventListener('pagehide', () => {
sendTrackingEvent('page_hidden', { reason: 'navigation' });
});
</script>
</body>
</html>👇 解释说明：
| 代码段 | 功能 |
|---|---|
sendTrackingEvent() |
封装通用埋点上报函数，支持任意事件类型 |
navigator.sendBeacon(..., { keepalive: true }) |
核心：启用 keepalive 保证卸载时不丢包 |
beforeunload |
用户关闭标签页或刷新时自动上报 |
pagehide |
页面从可见变为不可见时（如切换 tab）触发 |
✅ 这样做的好处是：
- 即使用户点了关闭按钮，埋点依然会被发送；
- 如果用户在短时间内多次操作（比如快速切换多个标签页），每个事件都能被捕获并上报；
- 整个过程对用户体验无感知（没有延迟、无弹窗）；
四、兼容性与兜底策略（重要！）
虽然 Beacon API 很强大，但它不是所有浏览器都完美支持。下面我们来看下兼容性表格：
| 浏览器 | 是否支持 Beacon API | 是否支持 keepalive | 推荐做法 |
|---|---|---|---|
| Chrome ≥ 83 | ✅ 是 | ✅ 是 | ✅ 建议使用 |
| Firefox ≥ 79 | ✅ 是 | ✅ 是 | ✅ 建议使用 |
| Safari ≥ 14 | ✅ 是 | ❌ 否（仅部分版本） | ⚠️ 建议加 fallback |
| Edge ≥ 83 | ✅ 是 | ✅ 是 | ✅ 建议使用 |
| IE ≤ 11 | ❌ 否 | ❌ 否 | ❗ 必须降级处理 |
✅ 兜底方案：检测能力 + 自动降级
我们可以写一个智能判断函数，根据浏览器能力决定使用哪种方式：
function safeSendBeacon(url, data, options = {}) {
if (navigator.sendBeacon && typeof navigator.sendBeacon === 'function') {
try {
const result = navigator.sendBeacon(url, data, options);
return result;
} catch (err) {
console.error('Beacon 发送出错:', err);
}
}
// fallback to fetch with keepalive (if supported)
if ('keepalive' in fetch) {
fetch(url, {
method: 'POST',
body: data,
keepalive: true,
headers: {
'Content-Type': 'application/json'
}
}).then(() => console.log('Fallback fetch sent'));
return true;
}
// 最终兜底：使用 XMLHttpRequest + setTimeout 模拟异步发送
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.timeout = 5000;
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
console.log('XHR 成功发送');
}
};
xhr.onerror = () => {
console.warn('XHR 请求失败');
};
xhr.send(data);
return true; // 返回 true 表示已尝试发送
}这样无论在哪种环境下，都能尽可能保证数据不丢失！
五、服务端接收建议：如何处理这些“沉默”的请求？
Beacon 请求本质上是一个 HTTP POST，所以我们可以在后端轻松接收和处理。
Node.js Express 示例：
const express = require('express');
const app = express();
app.use(express.json({ limit: '64kb' })); // 接收最大 64KB 数据
app.post('/api/track', (req, res) => {
const event = req.body;
// 记录日志或存入数据库
console.log('[TRACKING EVENT]', event);
// 异步写入数据库（避免阻塞响应）
process.nextTick(() => {
// TODO: 实际业务逻辑：保存到 Redis / MySQL / Kafka 等
});
// 返回 200 OK，告诉浏览器请求已完成
res.status(200).send('OK');
});
app.listen(3000, () => {
console.log('服务器监听在 http://localhost:3000');
});⚠️ 注意事项：
- 不要返回 5xx 错误码（如 500），否则浏览器可能认为请求失败，从而放弃重试；
- 建议使用
res.sendStatus(200)或res.send('OK')； - 对于大量埋点数据，建议接入消息队列（如 RabbitMQ/Kafka）进行异步消费。
六、总结：为什么你应该马上用起来？
| 优势 | 描述 |
|---|---|
| ✅ 数据完整性 | 页面卸载不再丢失埋点数据 |
| ✅ 性能友好 | 不阻塞主线程，不影响用户体验 |
| ✅ 标准化 | W3C 规范，各大浏览器广泛支持 |
| ✅ 易于集成 | 几行代码即可替换原有 fetch 方案 |
| ✅ 安全可靠 | 无需额外权限，无需用户授权 |
📌 结论：
如果你还在用 fetch() 或 XMLHttpRequest 在 beforeunload 中上报数据，请立即升级到 navigator.sendBeacon(..., { keepalive: true })。这是一个轻量级却极其有效的优化手段，尤其适合以下场景：
- 用户行为分析（PV/UV、点击流）
- A/B 测试数据收集
- 转化率追踪（如注册、下单）
- 日志监控（前端异常上报）
附录：常见问题 FAQ
| 问题 | 回答 |
|---|---|
| Beacon 只能发 JSON 吗？ | 不是，可以发字符串、Blob、FormData，只要不超过 64KB |
| keepalive 会影响性能吗？ | 不会，它是低优先级后台任务，不影响主流程 |
| 能否手动控制超时时间？ | ❌ 不能，Beacon 请求由浏览器自动管理，超时通常为几秒到几十秒 |
| 跨域可以吗？ | ✅ 可以，但目标服务器必须设置正确的 CORS 头（Access-Control-Allow-Origin） |
| 有并发限制吗？ | ✅ 有，浏览器一般限制同时最多 6 个 Beacon 请求 |
好了，今天的讲座就到这里。希望你能真正理解并应用 Beacon API 和 keepalive 标志，让你的埋点系统更稳定、更可靠！
记住一句话：
“数据丢了，比功能 Bug 更可怕。” —— 因为你永远不知道它有多重要。
谢谢大家！