数据指标上报方式

[funnycoderstar]

埋点方案

• 全埋点
• 手动埋点（代码上报）

数据指标上报方式

前端埋点收集到的数据需要上报给服务端，目前较为常用的方案为三种。

1. 动态创建img标签，通过src发出请求

通过 img 标签

function sendByImg(src, data) {
    var img = document.createElement("img");
    img.src = `${src}?log=${data}`;
}

通过 Image 对象

function sendByImage(src) {
    var img = new Image();
    img.src = `${src}?log=${data}`;
}

优点：

1. 支持跨域
2. 上报数据不需要响应
3. src请求数据量小，速度快，页面销毁时监控埋点会等上报请求发送完毕，再执行页面卸载

缺点

1. 无法发送大量数据
2. 页面销毁时有埋点监控会让页面关闭速度慢，影响用户体验

2. ajax/fetch

优点：

1. 灵活设置请求头
2. 发送大体量数据，满足特定场景需求
   缺点：
3. 数据量大的请求占用带宽资源多，增加服务器压力。
4. 页面销毁时的监控埋点大概率上报失败

3. navigator.sendBeacon

navigator.sendBeacon(url, data);

优点：

1. 用来解决web页面在触发卸载销毁事件 unload期间会中断所有异步xhr请求的问题。会保证页面在已经关闭的情况下也发送请求

缺点：

1. 只支持post，且数据量不会像正常xhr的post数据量那么大，由客户端决定
2. 存在兼容问题

混合式埋点上报方案

1. 轻量级数据使用 image src 属性进行上报
2. 特定场景需要采集大量级的数据可以改用post请求的方式
3. 需要监测用户关闭浏览器时上报数据，采用 navigator.sendBeacon，如果不支持，降级为 image src属性