js sendBeacon
页面性能日志:
DNS解析耗时 TCP链接耗时 SSL安全链接耗时 网络请求耗时 DOM解析耗时 资源加载耗时 首包时间 白屏时间 首次可交换时间 Dom Ready时间 页面完全加载时间。
如某些统计系统,在页面unload时,如果要上报当前数据,采用xhr的同步上报方式,会阻塞当前页面的跳转;使用new Image有可能遇到aborted,导致无法成功发送。
现在好了,可以使用浏览器来提供发送保障的更简洁的sendBeacon方法。sendBeacon是异步的,不会影响当前页到下一个页面的跳转速度,且不受同域限制。
window.addEventListener('unload', logData, false);
function logData() {
navigator.sendBeacon("/log", analyticsData);
}
sendBeacon 如果成功进入浏览器的发送队列后,会返回true;如果受到队列总数、数据大小的限制后,会返回false。返回ture后,只是表示进入了发送队列,浏览器会尽力保证发送成功,但是否成功了,不会再有任何返回值。目前暂无具体的数据长度限制标准。
考虑到对目前浏览器的支持情况,需要做一下降级支持(如同步模式下的xhr,如果不是同域则要支持CORS):
navigator.sendBeacon || new Function('var xhr=new XMLHttpRequest();xhr.open("POST",arguments[0],true);r.send(arguments[1]);');
当前浏览器对sendBeacon的支持情况(最新进展见:http://caniuse.com/#search=sendBeacon):
- Chrome 37+
- Firefox (Gecko) 31+
- Internet Explorer 不支持
- Opera 24+
- Safari 不支持
手机端常用浏览器不支持:Android浏览器支持了,但是iOS尚无支持
Google Analytics已经使用了navigator.sendBeacon()来上报数据:http://www.thyngster.com/google-analytics-added-sendbeacon-functionality-universal-analytics-javascript-api/
via:
W3标准描述:https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/Beacon/Overview.html
MDN介绍:https://developer.mozilla.org/en-US/docs/Web/API/navigator.sendBeacon
js sendBeacon的更多相关文章
- 谷歌 analytics.js 简要分析
下面是部分翻译过的JS,看起来好看些. (function () { function setHref(a, b) { return a.href = b; } function setName( ...
- 谷歌 analytics.js 部分解密版
源:http://www.google-analytics.com/analytics.js (function(){var aa=encodeURIComponent,f=window,ba=set ...
- 温故而知新 前端日志上传新姿势 navigator.sendBeacon(信标)
原文地址:https://mp.weixin.qq.com/s/-moAfEZicrFmun4qfWLdOQ 简单示例js: var data = JSON.stringify({ name: 'Be ...
- 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包
使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- js学习笔记:操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
随机推荐
- spring 过滤器
Spring的web包中中有很多过滤器,这些过滤器位于org.springframework.web.filter并且理所当然地实现了javax.servlet.Filter,不过实现的方式有以下几类 ...
- mysql查询字段为null 返回0
SELECT IF(AVG(字段) IS NULL,0, 字段) as 重命名 From xxx
- 设计模式之原型模式(深入理解OC中的NSCopying协议以及浅拷贝、深拷贝)
原型模式:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.原型模式其实就是从一个对象再创建另一个可定制的对象,而且不需知道任何创建的细节. 比如说,有一个Person类,有firstN ...
- java中判断字节数组的编码方式是不是UTF-8
1,用google的工具包,配置maven: <!-- https://mvnrepository.com/artifact/com.googlecode.juniversalchardet/j ...
- 1. AutoEncoder介绍
1. AutoEncoder介绍 2. Applications of AutoEncoder in NLP 3. Recursive Autoencoder(递归自动编码器) 4. Stacked ...
- [EF] 如何在 Entity Framework 中以手动方式设定 Code First 的 Migration 作业
Entity Framework (简称 EF) 发展到现在, 版本已经进入 6.1.0, 距离我写的「在 VS2013 以 Code First 方式建立 EF 资料库」这篇文章已有半年的时间.如果 ...
- 11月Android笔记
不知不觉又过了两个月了,过的够呛.新收获:百度云,视频直播,sqlite加密,lucene,SlidingPaneLayout. 我发现只要你有心,你期望的事情会接踵而来(不包括爱情= =) 上个游戏 ...
- Kettle 添加对应hadoop版本的支持
在hdp的官网上有一个ETL工具叫做Talend Open Studio,然后我就下了,并且在群里询问了一下,突然间冒出来一群ETL高手,经高人指点认识了一款叫做Kettle的软件,经过这两天的试用, ...
- Redis基准
Redis的基准是实用程序运行n个命令检查Redis 的性能. 语法 redis的基准的基本语法如下所示: redis-benchmark [option] [option value] 例子 下面给 ...
- 【Ansible】 各种模块
[Ansible 模块] 就如python库一样,ansible的模块也分成了基本模块和第三方拓展模块(自定义的模块).这些模块其实才是作为真实的逻辑载体,在帮助ansible进行作业. ansibl ...