search

LLwanran / front_end_studying

前端知识要点
https://llwanran.github.io/front_end_studying/
2 stars 1 forks source link

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

Open LLwanran opened 5 years ago

LLwanran commented 5 years ago

作用：工作中，用于前端监控，比如曝光等等，谷歌和百度的都是用的1x1 像素的透明 gif 图片；
why?

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

补充楼上~以下为参考了网上资料后的一些个人整理：

  1. 能够完成整个 HTTP 请求+响应（尽管不需要响应内容）
  2. 触发 GET 请求之后不需要获取和处理数据、服务器也不需要发送数据
  3. 跨域友好
  4. 执行过程无阻塞
  5. 相比 XMLHttpRequest 对象发送 GET 请求，性能上更好
  6. GIF的最低合法体积最小（最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF，只需要43个字节）

参考资料：
SegmentFault 上的回答
Web beacon
Using a Beacon Image for GitHub, Website and Email Analytics
为什么前端监控要用 GIF 打点