LuckyWinty / fe-weekly-questions

A pro to record some interview questions every week...
MIT License
341 stars 34 forks source link

为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片? #84

Open LuckyWinty opened 3 years ago

LuckyWinty commented 3 years ago
  1. 没有跨域问题,一般这种上报数据,代码要写通用的;(排除 ajax)
  2. 不会阻塞页面加载,影响用户的体验,只要 new Image 对象就好了;(排 除 JS/CSS 文件资源方式上报)
  3. 在所有图片中,体积最小;(比较 PNG/JPG)
KylinLee commented 3 years ago

既然是数据上报,那么这种方式是如何携带信息的呢?

FinnXing commented 3 years ago

既然是数据上报,那么这种方式是如何携带信息的呢?

用需要上报的数据拼接成URL,将img的src形式替换为拼接的URL,new Image 对象设置SRC后立即发送请求。然后Nginx通过URL识别返回一像素gif图片,并处理数据。 let _img = new Image(); _img.src = "https://example.com/aaa?a=1&b=2"

liangjuncheng1995 commented 3 years ago

后端想拿到统计数据和其他的请求方式差不多,比如浏览器的UA ![Uploading image.png…]()

sugarRain commented 3 years ago

图片这种上报方式统计pv uv或者少量的通用数据更合适一些

xyj626553989 commented 3 years ago

浏览器会缓存图片url地址,不会重复上报