在前端进行数据埋点时,常使用 1x1 像素的透明 gif 图片进行数据传输,这么做相对于一般的请求有哪些优势呢?
一、前端监控
前端监控,其实是在满足一定条件后,由Web页面将用户信息(UA/鼠标点击位置/页面报错/停留时长/etc)上报给服务器的过程。一般是将上报数据用 url_encode(百度统计/CNZZ)或JSON编码(神策/诸葛io)为字符串,通过url参数传递给服务器,然后在服务器端统一处理。
这套流程的关键在于:
- 收集到用户信息;
- 将收集到的数据上报服务器。也就是说,只要能上报数据,无论是请求GIF文件还是请求js文件或者是调用页面接口,服务器端其实并不关心具体的上报方式。
前端埋点主要是讲用户信息上报给服务器,不需要服务器做出消息体响应。
事实上向服务器端上报数据有多种方式,可以通过请求接口,请求普通文件,或者请求图片资源的方式进行。
- 接口(GET、POST、HEAD…)
- 普通文件 (JS、CSS、TTF…)
- 图片 (JEPG、BMP、PNG、GIF…)
二、1x1
像素gif
图片埋点优势
- 不存在跨域问题。埋点域名不一定是当前域名,为了避免出现跨域问题,排除ajax接口方式。
- 不需要操作DOM,性能更好。请求图片只需要在 js 中
new
一个Image
对象就能发起请求,同时还不会造成阻塞。这也是请求普通文件所不具备的。 - 节约体积,节省流量。1x1像素是最小的合法图片,同时gif格式的图片,其最小文件相对于其他格式的最小文件需要的字节数更少。
图片请求不占用 Ajax 请求限额