search

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地址，不会重复上报