前端行为监控（埋点）、异常监控、性能监控收集到的数据需要上报给服务端，目前较为常用的方案为三种。
1. 传统XHR请求
- 优点：可以灵活地设置请求头属性，post请求可以发送大体量数据，满足特定场景的埋点需求。
- 缺点：数据量大的请求占用带宽资源多，增加服务器压力。页面销毁时的监控埋点大概率上报失败。
2. Image 对象
利用图标对象的src属性发送get请求上报数据
const image = new Image()
image.src = 'https://monitor.cn/abc.png'
- 优点：上报数据的请求不需要接收响应，可灵活跨域，src请求体量小，速度快，页面销毁时的监控埋点会等上报请求发送完毕，再执行页面卸载。
- 缺点：无法发送大体量数据，页面销毁时有监控埋点会让页面关闭速度变慢，影响用户体验。
3. Beacon API
Beacon api 是w3c新引入的补充性api，就是用来解决web页面在触发卸载销毁事件unload期间会中断所有异步xhr请求的问题。
这个API给navigator对象增加了一个sendBeacon()方法。
这个方法接收一个URL和一个数据有效载荷参数，并会发送一个POST请求。
可选的数据有效载荷参数有ArrayBufferView、Blob、DOMString、FormData实例。
它会保证页面在已经关闭的情况下也会发送请求。
document.onunload = function () {
navigator.sendBeacon('https://monitor.cn/report', data)
}
不过它也有缺点：
只支持post请求，并且发送的数据量不会像正常xhr的post数据量那么大，最大数据量大小是由客户端（用户浏览器）版本决定的，chrome@70版本测试大概15MB左右。
因为是新补充的api，会存在浏览器兼容性问题，如图：
总结
- 上报轻量级的数据时可以采取image src属性进行上报
- 特定场景需要采集大量级的数据可以改用普通post请求方式
- 在需要监测用户关闭浏览器时上报数据，首选采用beaconApi方式，若用户的当前浏览器不支持该方法，可降级为image方案。目前很多大厂已采用这种混合式埋点方案。
