发送数据埋点为何使用1x1透明gif图？

• 能够完成整个 HTTP 请求+响应（尽管不需要响应内容）
• 触发 GET 请求之后不需要获取和处理数据、服务器也不需要发送数据
• 避免跨域（img 天然支持跨域）
• 执行过程无阻塞
• 相比 XMLHttpRequest 对象发送 GET 请求，性能上更好
• 利用空白gif或1x1 px的img是互联网广告或网站监测方面常用的手段，简单、安全、相比PNG/JPG体积小，1px 透明图，对网页内容的影响几乎没有影响，这种请求用在很多地方，比如浏览、点击、热点、心跳、ID颁发等等。

另外该脚本的位置一般放在页面最后以免阻塞页面渲染，并且一般情况下也不需要append到DOM中。通过它的onerror和onload事件来检测发送状态。

<script type="text/javascript">
 var thisPage = location.href;
 var referringPage = (document.referrer) ? document.referrer : "none";
 var beacon = new Image();
 beacon.src = "http://www.example.com/logger/beacon.gif?page=" + encodeURI(thisPage)
 + "&ref=" + encodeURI(referringPage);
</script>

解答一些疑惑与问题：

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像素是最小的合法图片。而且，因为是通过图片打点，所以图片最好是透明的，这样一来不会影响页面本身展示效果，二者表示图片透明只要使用一个二进制位标记图片是透明色即可，不用存储色彩空间数据，可以节约体积。而在所有的图片类型中，GIF的体积是最小的（只需要43个字节）。