介绍下navigator.sendBeacon方法

navigator.sendBeacon() 是HTML5新增的一个API,用于在页面卸载(如关闭、刷新、跳转)时异步发送少量数据到服务器,且不会阻塞页面卸载或影响后续导航的加载性能。这在需要收集用户行为数据(如页面停留时间、按钮点击统计)的场景中特别有用。

一、核心特点

  1. 异步非阻塞:数据发送不会阻塞页面卸载流程,用户体验不受影响。
  2. 高可靠性:使用HTTP POST请求,浏览器确保在页面关闭前尝试发送数据。
  3. 小数据量优化:设计初衷是发送少量数据(通常<64KB),过大的数据可能被丢弃。
  4. 跨域支持:支持跨域请求,需服务器配置CORS。

二、基本语法

javascript 复制代码
const isSent = navigator.sendBeacon(url, data);
  • 参数
    • url:目标URL(字符串)。
    • data(可选):要发送的数据,可以是:
      • ArrayBuffer
      • ArrayBufferView(如Uint8Array
      • Blob/File
      • FormData
      • 字符串(如JSON、普通文本)
  • 返回值
    • true:浏览器已将请求加入发送队列。
    • false:队列已满或请求无法入队(如URL无效)。

三、典型应用场景

  1. 埋点统计

    javascript 复制代码
    window.addEventListener('unload', () => {
      const data = JSON.stringify({
        page: window.location.pathname,
       停留时间: performance.now(),
        点击事件: [...document.querySelectorAll('button')].map(btn => btn.id)
      });
      navigator.sendBeacon('/analytics', data);
    });
  2. 用户会话追踪

    javascript 复制代码
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        navigator.sendBeacon('/session-tracker', 'session-ended');
      }
    });
  3. 表单自动保存

    javascript 复制代码
    const formData = new FormData(document.getElementById('myForm'));
    window.addEventListener('beforeunload', () => {
      navigator.sendBeacon('/auto-save', formData);
    });

四、与其他请求方式的对比

特性 sendBeacon XMLHttpRequest/fetch
阻塞页面卸载 ❌ 不阻塞 ✅ 可能阻塞(同步请求)
请求优先级 低(后台排队) 高(可能影响新页面加载)
数据大小限制 通常<64KB 无明确限制
自动重试 ✅ 浏览器保证尝试发送 ❌ 需手动实现重试逻辑
适合场景 页面卸载时的小数据 实时数据交互

五、兼容性与替代方案

  1. 兼容性

    主流浏览器(Chrome 39+、Firefox 31+、Safari 11+、Edge 14+)均支持,IE不支持。

  2. 降级方案

    对于不支持的浏览器,可使用同步XMLHttpRequest(但会阻塞页面):

    javascript 复制代码
    function sendData(url, data) {
      if (navigator.sendBeacon) {
        return navigator.sendBeacon(url, data);
      } else {
        // 降级方案(注意:会阻塞页面)
        const xhr = new XMLHttpRequest();
        xhr.open('POST', url, false); // 第三个参数为false表示同步请求
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(data);
        return xhr.status === 200;
      }
    }

六、注意事项

  1. 数据格式

    • 发送JSON时需设置Content-Type(服务器端接收时需注意解析)。
    • 发送FormData时无需手动设置Content-Type,浏览器会自动处理。
  2. 服务器响应
    sendBeacon不关心服务器响应,无法获取返回值。

  3. 调试技巧

    • 在Chrome开发者工具的"Network"面板勾选"Preserve log"以查看卸载时的请求。
    • 使用visibilitychange事件代替unload/beforeunload,因为前者在页面进入后台(如切换标签)时触发,调试更方便。

七、面试延伸问题

  1. 为什么sendBeaconfetch更适合页面卸载时的数据发送?

    fetch默认是异步的,但页面卸载可能中断异步请求;而sendBeacon由浏览器保证在页面关闭前尝试发送。

  2. 如果需要发送大量数据(如1MB),sendBeacon是否合适?

    → 不合适,sendBeacon设计用于小数据,大数据可能被丢弃,建议使用fetch配合keepalive选项。

  3. 如何测试sendBeacon是否正常工作?

    → 可使用visibilitychange事件触发发送,在开发者工具中观察网络请求;或在服务器端记录接收情况。

八、现代替代方案(fetch + keepalive)

对于需要发送大量数据或获取响应的场景,可使用fetchkeepalive选项:

javascript 复制代码
window.addEventListener('unload', async () => {
  const data = await generateLargeData();
  await fetch('/api/upload', {
    method: 'POST',
    body: data,
    keepalive: true // 即使页面关闭也继续发送
  });
});

keepalive的兼容性与sendBeacon类似,但支持更大数据量和响应处理。

相关推荐
Bdygsl41 分钟前
前端开发:CSS(2)—— 选择器
前端·css
斯~内克1 小时前
CSS包含块与百分比取值机制完全指南
前端·css·tensorflow
百万蹄蹄向前冲7 小时前
秋天的第一口代码,Trae SOLO开发体验
前端·程序员·trae
努力奋斗17 小时前
VUE-第二季-02
前端·javascript·vue.js
路由侠内网穿透7 小时前
本地部署 SQLite 数据库管理工具 SQLite Browser ( Web ) 并实现外部访问
运维·服务器·开发语言·前端·数据库·sqlite
一只韩非子7 小时前
程序员太难了!Claude 用不了?两招解决!
前端·claude·cursor
JefferyXZF7 小时前
Next.js项目结构解析:理解 App Router 架构(二)
前端·全栈·next.js
Sane7 小时前
react函数组件怎么模拟类组件生命周期?一个 useEffect 搞定
前端·javascript·react.js
gnip8 小时前
可重试接口请求
前端·javascript
若梦plus8 小时前
模块化与package.json
前端