什么是信标(Beacon)?

信标(Beacon)可以异步与非阻塞的数据传输,从而最大限度地减少与其他关键操作的资源争用,同时它可以确保这些请求一定会被处理并将其传递到服务端:

  • 信标请求优先避免与关键操作和更高优先级的网络请求竞争。
  • 信标请求可以有效地合并,以优化移动设备上的能量使用。
  • 保证页面卸载之前启动信标请求,并允许运行完成且不会阻塞请求或阻塞处理用户交互事件的任务。

信标的使用非常简单:

var data = JSON.stringify({  log: 'it is a log'});window.navigator.sendBeacon('/apiLog', data)

参数

  • url:上报的目标地址
  • data:被上报的数据
  • 返回值(Return Value):sendBeacon 方法被执行后返回一个布尔值,true 代表用户代理成功地将信标请求加入到队列中,否则返回 false。

用户代理对通过信标发送的数据量进行限制,以确保请求被成功传递到服务端,并且对浏览器活动的影响降到最小。如果要排队的数据量超出了用户代理的限制,sendBeacon方法将返回false,返回true代表浏览器已将数据排队等待传递。然而,由于实际数据传输是异步的,所以此方法不提供任何关于数据传输是否成功的信息。

虽然信标得到了很高的支持度,但还是无法在所有浏览器中使用,所以如果您想使用信标上报前端日志,一些特征检测是必要的。

还有一个需要注意的是,通过信标发送的请求,请求方法均为 POST,且不支持修改。

总结

日志上报在生产环境下不仅仅是把请求发出去。日志上报并不是主要逻辑所以优先级很低,为了最佳的用户体验,在考虑避免占用业务计算资源和避免竞争业务网络请求的同时我们还要保证数据一定会交付到服务端,最好的方式是尽可能的使用信标(Beacon)。

©著作权归作者所有:来自51CTO博客作者mb607558ea4fef1的原创作品,如需转载,请注明出处,否则将追究法律责任

更多相关文章

  1. 浅谈Web安全常见问题
  2. crmeb H5本机访问正常,其他机器访问出现请求失败
  3. JavaScript:演示Ajax的get和post请求,练习选顶卡和换肤案例
  4. nodejs搭建本地服务器
  5. OSI七层模型和TCP/IP模型
  6. 【JS基础入门】JavaScript原生Ajax请求与响应处理方式及JSON数据
  7. Tomcat日常维护笔记 - 运维小结
  8. JS跳转引发浏览器NS_BINDING_ABORTED
  9. 技术架构如何抓大放小

随机推荐

  1. android TextView显示文字和图片
  2. Android中dip, dp, px, sp之间的区别
  3. Android源码下载
  4. 2013.05.16——— android 关于listview
  5. android下giflib
  6. [Android] 录音与播放录音实现
  7. android添加外部按键
  8. Android 中自定义View的应用
  9. Android spannableStringBuilder用法整理
  10. Android Menu功能菜单