Skip to main content

埋点使用Gif图片的优点

· 2 min read

原文摘自: 为什么大厂前端监控都在用GIF做埋点?

防止跨域

如果调用接口上报数据, 需要处理跨域问题. 图片的src属性并不会跨域, 并且同样可以发起请求.

防止阻塞页面加载

通常, 创建资源节点后只有将对象注入到浏览器DOM树后, 浏览器才会实际发送资源请求. 反复操作DOM不仅会引发性能问题, 而且载入js/css资源还会阻塞页面渲染, 影响用户体验.

但是图片请求例外. 构造图片打点不仅不用插入DOM, 只要在js中new出Image对象就能发起请求, 而且还没有阻塞问题.

GIF的体积更小

最小的BMP文件需要74个字节, PNG需要67个字节, 而合法的GIF, 只需要43个字节. 同样的响应, GIF可以比BMP节约41%的流量, 比PNG节约35%的流量. 并且大多采用的是1*1像素的透明GIF来上报, 1x1像素是最小的合法图片.