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. Linux网络课程学习第二天

    第二天学习日志: 今天的课程主要内容: 详细介绍了如何安装红帽RHEL7的系统,并对RPM,Yum,Systemd和bash进行了简单介绍.

  2. 在什么情况下,不写notify()或者notifyAll()就能唤醒被wait()阻塞的线程?

    之前再看java关于线程的某视频时,发现在JDK源码中,join()=join(0)=wait()=wait(0),但是视频中在join()了之后,并没有用notify()或者notifyAll()去 ...

  3. 论文阅读笔记(九)【TIFS2020】:True-Color and Grayscale Video Person Re-Identification

    Introduction (1)Motivation:在现实场景中,摄像头会因为故障呈现灰白色,或者为了节省视频的存储空间而人工设置为灰白色.灰度图像(grayscale images)由8位存储,而 ...

  4. Wannafly Camp 2020 Day 2D 卡拉巴什的字符串 - 后缀自动机

    动态维护任意两个后缀的lcp集合的mex,支持在串末尾追加字符. Solution 考虑在 SAM 上求两个后缀的 LCP 的过程,无非就是找它们在 fail 树上的 LCA,那么 LCP 长度就是这 ...

  5. 自主开发编程语言被指Python套壳,中科院开发者道歉

    中科院计算所团队“完全自主设计.开发和实现”的“木兰”编程语言是Python语言的套壳产品?针对近日这一网络质疑,1月17日,项目负责人.中科院计算所编译实验室员工刘雷在科学网上发表回应称,木兰语言在 ...

  6. Eclispe WEB项目 转到 IDEA 后无法部署问题

    IDEA是个强大的IDE  这个就不用多说了 Eclispe 的Web项目  转到IDEA之后,开始部署会出现大量的问题 项目从SVN下载下来的时候,大概就是这个样 第一步是先设置  项目结构  也就 ...

  7. unicode 地址

    unicode  地址

  8. Invalid Native Object

    发现是因为没有addChild到父节点上引起的

  9. The Softmax function and its derivative

    https://eli.thegreenplace.net/2016/the-softmax-function-and-its-derivative/  Eli Bendersky's website ...

  10. 401 WebEx会议教程一 —— 参加会议

    · WebEx会议教程一 —— 参加会议 参加他人发起的会议 1.  在邀请邮件中,接受对方的会议邀请: 2.  一般在WebEx会议开始前15分钟时,邮箱客户端会提醒您 (如下图类似提示) 3.   ...