signed

QiShunwang

“诚信为本、客户至上”

前端监控数据的上报方式对比

2021/4/26 16:17:12   来源:

发现两篇说明前端数据监控比较好的文章,收藏在此。
http://www.yunishare.cn/2021/01/web-report-methods-compare.html
https://mp.weixin.qq.com/s/v6R2w26qZkEilXY0mPUBCw?utm_source=tuicool&utm_medium=referral

总结如下:

目前前端采集上报数据的实现方式,大致分三种:

  1. 接口请求方式上报
  2. 图片打点方式上报
  3. navigator.sendBeacon API上报
    在这里插入图片描述
    (图片中的红框是比较大的限制)

而为什么打点都用GIF,不用js、css之类的,主要是因为:

  1. 没有跨域问题;
  2. 不会阻塞页面加载,影响用户体验;
  3. 在所有图片中体积最小,相较BMP/PNG,可以节约41%/35%的网络资源。