1、使用图片信标
这项技术非常类似动态脚本注入. 使用JavaScript创建一个新的Image对象, 并把src属性设置为服务器上的脚本URL. 该URL包含了我们要通过GET传回的键值对数据. 请注意并没有创建img元素或把它插入DOM.
服务器会接收到数据并保存下来, 它无需向客户端发送任何回馈消息, 因此没有图片会实际显示出来. 这是给服务器回传信息最有效的方式. 它的性能消耗很小, 并且服务端的错误完全不会影响到客户端.
图片信标很简单, 但也意味着它能做的事情是有限的. 你无法发送POST数据, 而URL的长度有最大值, 所以你可以发送的数据的长度被限制得相当小. 你可以接收服务器返回的数据, 但只局限于非常少的几种方式. 一种方式是监听Image对象的load事件, 它会告诉你服务器是否成功接收数据. 你还可以检查服务器返回的图片的宽度和高度(如果是图片的话)并使用这些数字通知你服务器的状态. 举个例子, 宽度为1表示”成功”, 为2表示”重试”.
如果你不需要在响应中返回数据, 就应该发送一个不带消息正文的204 No Content状态码, 它将阻止客户端继续等待永远不会到来的消息正文.
例子
2.navigator.sendBeacon
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的支持情况(最新进展见：/#search=sen…)：
Chrome 37+Firefox (Gecko) 31+Internet Explorer 不支持Opera 24+Safari 不支持手机端常用浏览器不支持：Android浏览器支持了，但是iOS尚无支持
Google Analytics已经使用了navigator.sendBeacon()来上报数据：/google-anal…
3、IE8下的跨域共享
XDomainRequest 是代表javascript和Ajax的跨域请求
IE8+可使用XDomainRequest进行跨域请求
Members组成
XDomainRequest包含以下几部分：
1.事件
2.方法
3.属性
Events事件
1）onerror事件：完成跨域请求过程中发生错误时，会被激发
2）onload事件：成功请求完毕，返回对象时，会被激发
3）onprogress事件：浏览器开始从服务器端接收数据时，会被激发
4）ontimeout事件：超时会被激发
Methods方法
1）abort方法：终止等待send
2）open（XDomainRequest）方法：建立与服务器的链接
3）send（XDomainRequest）方法：传输一个字符窜数据给服务器来进行处理
Properties属性
1）constructor属性：返回一个对象的构造函数的引用
2）contentType属性：返回html请求或者返回的头部的content-type属性
3）responseText属性：以字符窜形式返回请求的body内容
4）timeout属性：超时返回的值
Usage用法
//创建一个对象
var xdr = new XDomainRequest();复制代码
//以get的方式建立链接
xdr.open("get", "/xdr.aspx");复制代码
//发送数据给服务器
xdr.send();Example例子复制代码
复制代码
如果觉得《统计上报---日志上报成功率高的方式》对你有帮助，请点赞、收藏，并留下你的观点哦！
