浅析为什么前端监控要用GIF打点

　　前端监控的关键在于：（1）能够收集到用户信息；（2）能够将收集到的数据上报给服务器。

　　也就是说，只要能上报数据，无论是请求GIF文件，还是请求js文件或者是调用页面接口，服务器端其实并不关心具体的上报方式。向服务器端上报数据，可以通过请求接口，请求普通文件，或者请求图片资源的方式进行。为什么所有系统都统一使用了请求GIF图片的方式上报数据呢？

　　解答这个问题，要用排除法。

1、首先，为什么不能直接用 GET/POST/HEAD 请求接口进行上报？

　　这个比较容易想到原因。一般而言，打点域名都不是当前域名，所以所有的接口请求都会构成跨域，而跨域请求很容易出现由于配置不当被浏览器拦截并报错，这是不能接受的。所以，直接排除。

2、其次，为什么不能用请求其他的文件资源（js/css/ttf）的方式进行上报？

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

　　但是图片请求例外。构造图片打点不仅不用插入DOM，只要在JS中 new 出 Image 对象就能发起请求，而且还没有阻塞问题，在没有JS的浏览器环境中也能通过 img 标签正常打点，这是其他类型的资源请求所做不到的。

　　所以，在所有通过请求文件资源进行打点的方案中，使用图片是最好的解决方案。

3、那同样都是图片，上报时选用了1x1的透明GIF，而不是其他的PNG/JEPG/BMP文件。

　　这是排除法的最后一步，原因其实不太好想，需要分开来看。

　　首先，1x1像素是最小的合法图片。而且，因为是通过图片打点，所以图片最好是透明的，这样一来不会影响页面本身展示效果，二者表示图片透明只要使用一个二进制位标记图片是透明色即可，不用存储色彩空间数据，可以节约体积。因为需要透明色，所以可以直接排除JEPG(BMP32格式可以支持透明色)。

　　然后还剩下BMP、PNG和GIF，但是为什么会选GIF呢？

　　因为体积！最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF，只需要43个字节。

　　同样的响应，GIF可以比BMP节约41%的流量，比PNG节约35%的流量。这样比较一下，答案就很明显了。上报数据，显然GIF才是最佳选择。

4、总结：前端监控使用GIF进行上报主要是因为：

（1）没有跨域问题；

（2）不会阻塞页面加载，影响用户体验；

（3）gif 在所有图片中体积最小，相较BMP/PNG，可以节约41%/35%的网络资源。

5、如何使用

<button onClick="aa(key, value)">test</button>
<script>
function aa(key, value){
    new Image().src =`./test.gif?${key}=${value}&${Math.random()} `
}
</script>
// 每点击一次test按钮，都会通过test.gif向服务器发送埋点数据

　　当然，实际业务中，可能没有这么简单，还需要添加各种监控，因此有时候随机数就可以不要了~

　　因此通过这种最简单的方法，可以精准的获取用户点击的数据了。同理，曝光数据等，也可以这么获取。

　　注：test.gif 是一个真实的图片，一般是1px*1px大小的空白的透明的图片。