sendBeacon

sendBeacon 是什么？

• sendBeacon() 是 HTML5 引入的一种 API，属于 Navigator 对象的一部分。
• 在 Web 浏览器中，它允许开发者在页面卸载（unload）时异步且无阻塞地向服务器发送少量数据。即使用户关闭了浏览器窗口或标签页，该方法也能确保数据的发送

sendBeacon 解决的问题

• 页面生命周期结束后的数据发送：

  • 在传统的页面生命周期管理中，当用户离开一个网页时，尚未完成的网络请求通常会被浏览器取消，导致一些重要统计数据或诊断信息无法成功发送到服务器。

  • sendBeacon() 解决了这个问题，保证在页面关闭前能够将这些数据发送出去，即便网络状况不佳或者用户快速退出页面。

• 性能优化：

  • 由于 sendBeacon()使用的是异步非阻塞模式，所以它不会影响页面的加载速度或用户的交互体验，特别适合于发送那些对时间敏感但并非关键任务的数据。

在会话结束时发送统计数据

• 网站通常希望在用户完成页面浏览后向服务器发送分析或诊断数据，最可靠的方法是在 visibilitychange 事件发生时发送数据

document.addEventListener("visibilitychange", function logData() {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
});

避免使用 unload 和 beforeunload

• 许多网站使用 unload 或 beforeunload 事件以在会话结束时发送统计数据。然而这是不可靠的，在许多情况下（尤其是移动设备）浏览器不会产生 unload、beforeunload 或 pagehide 事件。下面列出了一种不触发上述事件的情况：

  • 用户加载了网页并与其交互。
  • 完成浏览后，用户切换到了其他应用程序，而不是关闭选项卡。
  • 随后，用户通过手机的应用管理器关闭了浏览器应用

参考文献

• https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon