大厂面试经(三)：别再用 AJAX 做埋点上报了，面试官听到直接摇头

标签：前端性能优化、navigator.sendBeacon、数据埋点、页面卸载、面试技巧、字节跳动、腾讯、前端面试、浏览器通信

事情是这样——我在面试的时候，面试官突然抛出一个问题：“你知道用户离开页面时，如何优雅地上报日志吗？”

我下意识地说了句：“可以用 navigator.sendBeacon 啊。”

面试官明显一愣，然后追问：“你说说它和传统 AJAX 有什么区别？为啥你更推荐它？”

于是，我顺势把我对 sendBeacon 的理解全都说了出来，最后还聊到了它的使用场景和坑。面试结束后，HR跟我说，这一块给我的加分非常多。

所以，今天我来系统说说这个大厂必考但很多人忽略的 API —— navigator.sendBeacon。

什么是 sendBeacon？

简单一句话：

navigator.sendBeacon 是浏览器提供的一种异步、可靠的后台数据上报方式，特别适用于页面即将卸载时的数据发送。

举个最常见的应用场景： 用户关闭页面或跳转时，打点日志要发送到服务端，这时候你用 fetch、XHR 都可能被浏览器直接中断掉。而 sendBeacon 就是为这种场景生的！

和传统方式有啥区别？

一句话总结：

sendBeacon 是为“不关心响应，只求成功发送”的轻量级场景设计的。

典型用法场景

1. 用户行为埋点
2. 错误日志上报
3. 性能指标采集
4. 广告曝光计费

比如你可以这样写：

window.addEventListener('unload', function () {
  const data = JSON.stringify({ event: 'page_close', time: Date.now() });
  navigator.sendBeacon('/log/track', data);
});

甚至更稳妥的是在 visibilitychange 事件里监听：

document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'hidden') {
    const data = JSON.stringify({ event: 'leave', url: location.href });
    navigator.sendBeacon('/log/track', data);
  }
});

数据格式要求？

sendBeacon 的第二个参数可以是：

• ArrayBufferView
• Blob
• DOMString（最常用）
• FormData

注意⚠️：Content-Type 自动由浏览器设置，如果你传的是 JSON 字符串，它会默认为 text/plain;charset=UTF-8，而不是 application/json。

陷阱与限制

虽然 sendBeacon 听起来完美，但也有一些坑：

1. 不支持响应处理：你拿不到服务端的响应，适合“只发不回”的场景。
2. 大小限制：大多数浏览器限制为 64KB。
3. 不适合发大文件或批量数据。
4. 部分浏览器兼容性差（比如IE），但现代浏览器基本都支持。

如何回答面试官的追问？

如果面试官追问你“为什么用 sendBeacon”，你可以用这套回答：

在用户关闭页面或跳转时，传统的 AJAX 请求可能会被中断，导致日志丢失。而 sendBeacon 是异步且不会阻塞卸载流程，专门为这类轻量级上报设计，能更高概率送达服务器，提升数据完整性。

再举几个实际业务中的用例，比如埋点打点、广告点击上报等，面试官就很容易对你刮目相看了。

总结：一招制胜的细节API

很多人以为面试考的都是高大上的设计模式、源码分析，其实一个冷门但实用的 API，就能让你在关键时刻脱颖而出。

像 navigator.sendBeacon 这种小而美的 API，不光能优化用户体验，关键时刻还能让你面试飙分！

如果你也遇到面试被问“用户离开页面时如何上报数据”，记住这句回答：

“我会用 navigator.sendBeacon，它天生适合这种场景。”