专栏首页云前端[译] 用 sendBeacon 发送分析信息的优点

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

在实践中,我们使用 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 之前发生。这同时意味着你可以并行不悖地发送信息和跳转链接。

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

收到的累积指标的数量

限制

由于这个请求函数不接受响应,使得我们要设法让浏览器获知请求是否成功抵达服务端;这是切换到 sendBeacon 后为数不多需要应付的问题。通过函数返回值,我们将能够判断是否成功。

尽管 sendBeacon 规范 (https://www.w3.org/TR/beacon/#sec-sendBeacon-method) 没有规定数据大小,但浏览器厂商一般会限制请求体积,这样一来 sendBeacon 函数将在传输失败时返回 false ,反之则是 true

如果以上限制妨碍到了某些信息的收集,则 fetch 函数提供的 “keepalive” 选项,可以作为 sendBeacon 的一种 替代方案,该选项允许请求的存活长于页面。

在最后一个例子中,我对比了三种方法:

  1. 普通 fetch 请求
  2. 配置了 keepalive 的 fetch 请求
  3. beacon (ping)

总结

sendBeacon 为通过 HTTP 发送分析信息而生,善以用之可以改善站点的用户体验并增加应用曝光度。

原文:https://medium.com/fiverr-engineering/benefits-of-sending-analytical-information-with-sendbeacon-a959cb206a7a

文章分享自微信公众号:
云前端

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:云前端
原始发表时间:2022-01-20
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 使用 WEB API Beacon 记录行为日志 (译)

    原文: Logging Activity With The Web Beacon API;

    腾讯IVWEB团队
  • Android开发实现拨打电话与发送信息的方法分析

    本文实例讲述了Android开发实现拨打电话与发送信息的方法。分享给大家供大家参考,具体如下:

    砸漏
  • 前端埋点数据收集及上报方案

    埋点,它的学名是事件追踪(Event Tracking),主要是针对特定用户行为或业务过程进行捕获、处理和发送的相关技术及实施过程。埋点是数据领域的一个专业术语...

    落落落洛克
  • 【兼容性】监听页面关闭发送请求

    因为前端监控会在页面关闭的时候,发送一下日志,所以会涉及到监听页面关闭,之前我们只监听了一个beforeunload 来发送数据

    神仙朱
  • GA源代码里的小技巧之Beacon请求

    GA监控脚本一般都放在开发者的网页上。域名往往和Google不一样,这样发送请求到Google服务器的时候会涉及到跨域。普通的Ajax请求是做不到的,通常称这种...

    mmzhou
  • 你知道关闭页面时怎么向后台发送消息吗?

    这两天碰到一个需求:在用户刷新页面或者关闭页面的时候,前端要给后台发一条请求,释放该页面的授权占用。

    编程三昧
  • Web Beacon 刷新/关闭页面之前发送请求

    本文中提到的链接,因为微信的限制,没有显示出来,查看文中链接,需要点击最下方的阅读原文链接

    OBKoro1
  • 用Python分析WordPress官网所有插件的开发者信息

    书接上回,上一篇里我们已经把需要的数据爬下来了。众所周知,数据只有在分析出结论的时候才有价值,不能是为了爬而爬。

    丘壑
  • 腾讯二面:现在要你实现一个埋点监控SDK,你会怎么设计?

    这是小伙伴上周被问到的一个综合性设计题,如果是没有用过埋点监控系统,或者没有深入了解,基本就凉凉。

    用户9899350
  • Navigator.sendBeacon实现页面埋点统计

    我没了解过数据分析师这个职业,也不知道他们需要用哪些数据做什么。早之前做过页面统计,用的是神策和百度统计,里面那些数据个人觉得已经很全面了,最近公司进行一些特殊...

    wade
  • JS的页面生命周期事件

    今天做个大屏项目, 想在大屏加载所有资源前加个加载动画, 加载结束再移除, 当然肯定时在load事件里进行移除, 但是对其他的事件有点模糊了, 复习一下哦垃圾

    治电小白菜
  • 让前端监控数据采集更高效

    随着业务的快速发展,我们对生产环境下的问题感知能力越来越关注。作为距离用户最近的一层,前端的表现是否可靠、稳定、好用,很大程度上决定着用户对整个产品的体验和感受...

    桃翁
  • 10分钟彻底搞懂前端页面性能监控

    前端页面性能是一个非常核心的用户体验指标。本文介绍阿里UC 岳鹰全景监控平台 如何设计一个通用、低侵入性、自动上报的页面性能监控方案。主要采用的是Navigat...

    杂货铺老板
  • 用框架的你,可能早已忽略了这些事件API

    DOMContentLoaded,load,beforeunload,unload

    若川
  • 学生信息管理系统的用例图和图书管理系统系统分析及用例图[通俗易懂]

    “学生信息管理系统” 功能性需求包括以下内容: (1)系统管理员登录后可以对班级的基本信息进行增加、删除、修改、查询等操作。学校领导登录后可以对...

    全栈程序员站长
  • 用Python分析WordPress官网所有插件的开发者信息(续以及人物介绍)

    书接上回,上一篇里我们讲了一点数据分析的思路和方法,顺带分析了一下http://WordPress.org上所有插件的作者信息,得到了几个数据,比如插件数量To...

    丘壑
  • 网站数据统计分析之二:前端日志采集是与非

    在上一篇《网站数据统计分析之一:日志收集原理及其实现》中,咱们详细的介绍了整个日志采集的原理与流程。但是不是这样在真实的业务环境中就万事大吉了呢?事实往往并非如...

    用户1177713
  • 5.4、访客行为跟踪

    网站上追踪消费者行为的主要是通过页面标签技术,页面标签技术是一种从访客浏览器端收集数据的技术,通常是通过放置在网站中每个页面的javascript代码进行收集的...

    GA小站
  • 如何实现用户行为的动态采集与分析

    哈喽,大家好,我是清音,来自政采云前端团队。从去年开始负责用户行为采集与分析体系的建设。很高兴有机会能在这里给大家分享我们从 0-1 建设用户采集与分析系统的经...

    政采云前端团队

扫码关注腾讯云开发者

领取腾讯云代金券