什么是信标(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)。