[译] 用 sendBeacon 发送分析信息的优点

最新推荐文章于 2024-09-26 11:01:02 发布

云前端

最新推荐文章于 2024-09-26 11:01:02 发布

阅读量1.1k

点赞数 1

文章标签： java linux http ajax cookie

本文链接：https://blog.csdn.net/tonylua/article/details/122613220

版权

本文探讨了使用sendBeacon API发送分析信息的好处，包括无需响应、简化跨域资源共享、提高请求优先级、改进页面卸载时的行为等。此外，还讨论了如何克服请求成功状态反馈的挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实践中，我们使用 HTTP 请求将一些匿名指标从浏览器发送到服务器端。这些收集来的信息用于验证应用的行为是否正常、监控其质量和速度、服务恶化时发出警告等，也有助于通过统计分析和研究改善平台服务质量。

最近我们开始使用 sendBeacon API 来取代 XMLHttpRequests 完成以上任务。在本文中，我们将细数一些从此次转换中带来的好处。

sendBeacon 功能简介

sendBeacon 以一种将分析信息回传给服务端而无需响应的方式被创建出来。这种专注的设计目的和需要考虑行为、安全、性能和优先级的 XHR 有巨大的不同，这些稍后会详述。

首先值得强调的是其不需要响应的显著特性。当浏览器需要来自 web 服务器的响应时，就意味着应用可能会依照得到的信息行事 -- 这也是为何浏览器厂商们要实现某些防御机制以保护用户的原因，因而 sendBeacon API 也得以不受那些相同的约束。

下面的 Chrome Network 面板截图展示了截获的从 XHR 转向 sendBeacon 工作中，发往监控服务的请求。sendBeacon 请求被描述为 “ping” 类型，可以看到各种请求和它们之间的区别。

跨域资源共享 (CORS)

CORS 规定了一个域间（或子域间）发送数据的复杂协议，包含一个预检 OPTIONS 请求及默认不发送相关 cookie 头等策略。考虑到分析信息常被发送到不同的子域甚至完全跨域，这些限制还是必要的。

可以在 Network 面板中看到和每个 XHR 请求相伴而生的预检请求，也能发现 XHR 请求忽略了整个 cookie 头；而 sendBeacon 请求则没有这些限制 -- 不用预检请求，也携带了 cookie 头。

优先级

一旦浏览器能感知到某些请求是无关用户体验的，就能分出轻重缓急了，和用户体验相关的请求会被优先执行完毕。

在 Network 页签的 Priority 列中，这些请求的不同显而易见。

行为

因为 sendBeacon 请求无需响应，浏览器也就不用像对待 XHR 或 fetch 那样，每当页面一 unload 就得中断它们。Network 页签中包含了一个 status 和 time 列都为 (unknown) 的请求。该请求就是页面切换之前被执行而没来得及中断的；当下一个页面的请求被处理完后，浏览器才在后台将其完成了。

下面展示的，是一个发送页面有效期内累计指标的例子。我们在页面的生命周期内收集信息，并在页面可见性改变为隐藏时发送这些信息。这一事件发生在用户切换页签之时 -- 以及至关重要的是，在页面跳走并 unload 之前发生。这同时意味着你可以并行不悖地发送信息和跳转链接。

下图展示了这一特性如何增加了我们能够收集到的累积指标的数量。