http://kaifage.com/notes/76/navigator-sendBeacon.html

如某些统计系统,在页面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/
https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference?hl=zh-cn

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

使用 navigator.sendBeacon() 上报数据的更多相关文章

  1. 埋点 & 数据上报 & 数据异常处理

    埋点 & 数据上报 & 数据异常处理 如何在用户关闭浏览器前面,发送请求 beforeunload unload https://developer.mozilla.org/en-US ...

  2. ESP8266 上报数据到贝壳物联

    下面贴上代码: #include <aJSON.h> #include <SPI.h> #include <Wire.h> #include <dht11.h ...

  3. 温故而知新 前端日志上传新姿势 navigator.sendBeacon(信标)

    原文地址:https://mp.weixin.qq.com/s/-moAfEZicrFmun4qfWLdOQ 简单示例js: var data = JSON.stringify({ name: 'Be ...

  4. Hadoop源码分析之数据节点的握手,注册,上报数据块和心跳

    转自:http://www.it165.net/admin/html/201402/2382.html 在上一篇文章Hadoop源码分析之DataNode的启动与停止中分析了DataNode节点的启动 ...

  5. linux驱动由浅入深系列:高通sensor架构实例分析之三(adsp上报数据详解、校准流程详解)【转】

    本文转载自:https://blog.csdn.net/radianceblau/article/details/76180915 本系列导航: linux驱动由浅入深系列:高通sensor架构实例分 ...

  6. ESP8266上报数据到中国移动物联网平台HTTP

    #include <HttpPacket.h> #include <ArduinoJson.h> #include <ESP8266WiFi.h> HttpPack ...

  7. 29、从零写USB摄像头驱动之通过urb接受数据后上报数据是函数中fid的作用

    原因分析如下: 视频数据是由一帧一帧数据组成,为了防止数据错乱,会给每一帧数据分配一个frameid,从第0帧开始,接着是第1帧,接着又是第0帧这样交错进行的,对usb摄像头来说每一帧数据来源于多个包 ...

  8. html5统计数据上报API:SendBeacon

    公司为了精准的了解自己产品的用户使用情况,通常会对用户数据进行统计分析,获取pv.uv.页面留存率.访问设备等信息.与之相关的就是客户端的数据采集,然后上报的服务端.为了保证数据的准确性,就需要保证数 ...

  9. Linux input系统数据上报流程【转】

    转自:https://segmentfault.com/a/1190000017255939 作为鸡生蛋系列文章,这里主要关注Linux input系统,主要为触摸事件上报流程. 读该文章最好有对li ...

随机推荐

  1. HDU6683

    题意 英文 做法 考虑公比为\(\frac{a}{b}\),满足\(a>b,(a,b)=1\) 枚举长度\(k\),设序列头为\(p\),尾为\(q\),有\(p\times \frac{a^{ ...

  2. sqlserver创建和删除外键约束

    x先找出约束名字然后删除它我给个例子 --测试环境--主表create table test1(id int primary key not null,value int)insert test1 s ...

  3. Oracle 12c 多租户家族(12c 18c 19c)如何在 PDB 中添加 HR 模式

    Oracle 12c 多租户家族(12c [12.2.0.1].18c [12.2.0.2].19c [12.2.0.3])如何在 PDB 中添加模式:19c (19.3) 手工添加示例 HR 用户 ...

  4. 获取redis cluster master对应的slot分布情况

    需求:原生的redis-trib.rb功能是强大,但输出的内容过于繁杂,比如我需要关注哪些master对应哪些slots,不是很直观,如果集群的规模更大的话,那么输出的结果获取信息更加困难. 说明:这 ...

  5. DirectX11--HLSL语法入门

    前言 编写本内容仅仅是为了完善当前的教程体系,入门级别的内容其实基本上都是千篇一律,仅有一些必要细节上的扩充.要入门HLSL,只是掌握入门语法,即便把HLSL的全部语法也吃透了也并不代表你就能着色器代 ...

  6. 简单的登录验证小程序_python

    一.要求 输入用户名密码,验证成功之后显示欢迎信息,输错三次后锁定. 程序: #!/usr/bin/env python# _*_ coding:utf-8 _*_#Author:chenxz #将黑 ...

  7. ArcGis Server manager 忘记用户名和密码

    ArcGIS 10.1及以后版本重置Server Manager账户密码:(1)找到arcgis server的安装目录,目录指向\ArcGIS\Server\tools\passwordreset文 ...

  8. python面试的100题(21)

    正则表达式 94.请写出一段代码用正则匹配出ip? ip地址的生成规则. IP地址,是由32位数字二进制转为四个十进制的字符串组成. 怎么转化?下面讲解: 二进制:111111111111111111 ...

  9. 虚拟机中CentOS 6.5 添加扩展分区

    此扩展方法要求支持LVM 1.更改虚拟机配置 虚拟机->设置->硬盘->扩展磁盘容量 fdisk -l 查看,发现硬盘空间变大了 [root@thj Desktop]# fdisk ...

  10. 题解【AcWing176】装满的油箱

    题面 一开始拿到这个问题并不好做,于是考虑拆点. 考虑将一个点拆成 \(c+1\) 个,每个点表示(编号,剩余油量). 然后 \(\text{Dijkstra}\) 最短路即可. 每次跑 \(\tex ...