一般来说，web前端数据上报方式有三种：ajax/fetch、image的src、和信标(Beacon)，下面对这三种上报方式的利弊做一个简单分析
一、ajax/fetch
在 JavaScript 中，XMLHttpRequest 是客户端的一个 API，它为浏览器与服务端通信提供了一个便捷通道。现代浏览器都支持 XMLHttpRequest API，如 IE 7+、Firefox、Chrome、Safari 和 Opera 等。
这种方式发送数据相对来说比较简单，使用 post 方式可以发送大量的数据。默认发送方式是异步，不会阻塞页面，但会占用一定的客户端资源，且需要特殊处理跨域限制。ajax不支持在页面关闭后发送数据，也就是说如果在页面卸载时使用ajax发送数据，可能会发送不成功。
二、image
image 方式是通过将采集的数据拼接在图片请求的后面，向服务端请求一个 1*1 px 大小的图片实现的，设置它的 src 属性就可以发送数据。这种方式简单且天然可跨域，又兼容所有浏览器，没有阻塞问题，是目前比较受欢迎的前端数据上报方式。但由于只能是 get 请求，对上报的数据量有一定的限制，一般为 2~8 kb。同样，这种方式也不支持在页面关闭后发送数据。
var img = new Image();
img.width = 1;
img.height = 1;
img.src = '/sa.gif?project=default&data=xxx';
三、Beacon
navigator.sendBeacon()方法可用于通过HTTP POST将少量数据异步传输到Web服务器。该方法在页面跳转、刷新、关闭页面时发送请求，可以保证数据发送不易丢失，浏览器会对其进行调度以保证数据有效送达，并且不会阻塞页面的加载或卸载。不受跨域限制。具体使用方法如下：
const res = navigator.sendBeacon(url, data);
url：data 将要被发送到的网络地址；
data：将要发送的 ArrayBufferView、Blob、DOMString 或者 FormData 类型的数据；
返回值：当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。
四、总结
| 方式 | 跨域 | 关闭页面发送数据 | 请求方式 | 兼容性 | cookie携带 |
|---|---|---|---|---|---|
| ajax | 部分支持 | 不支持 | 全部 | 支持 | 同域名携带 |
| img | 支持 | 不支持 | get 大小有限制 | 支持 | 可配置 |
| sendBeacon | 支持 | 支持 | post 大小有限制 | IE | 同域名携带 |
没有一种数据上报方式在各个方面都是优秀的，都有一定的优缺点。因此，面对不同的需求时，我们要选择不同的方式来上报数据：
- 如果发送数据量较小，并且不对浏览器的network调试工具里的数据造成污染，采用 image 方式上报给服务端更合适；
- 如果发送数据量较大，比如统计接口的日志信息，ajax 方式更合适；
- 如果需要进行精确统计，比如统计页面的一些性能参数，选择 beacon 方式能最大程度保证数据成功率。
