zoukankan      html  css  js  c++  java
  • 使用 navigator.sendBeacon() 上报数据

    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

  • 相关阅读:
    Kibana详细入门教程
    Python爬取食品商务网蔬菜价格数据,看看蔬菜最近的价格情况
    用Python爬取某蔬菜网的行情,分析底哪个地区的蔬菜便宜
    ES启动失败;java.lang.IllegalStateException: No factory method found for class org.apache.logging.log4j.c
    ELK 5.0 组件后台启动
    linux中/etc/security/limits.conf配置文件说明
    redis面试常见问题
    单线程的Redis为什么能支持10w+的QPS?
    Redis大Key优化
    redis中查找大key方法汇总
  • 原文地址:https://www.cnblogs.com/liuzhenwei/p/5026390.html
Copyright © 2011-2022 走看看