chrome 插件-使用 vue 实现

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

  1. 避免跨域（img 天然支持跨域）

  2. 利用空白 gif 或 1x1 px 的 img 是互联网广告或网站监测方面常用的手段，简单、安全、相比 PNG/JPG 体积小，1px 透明图，对网页内容的影响几乎没有影响，这种请求用在很多地方，比如浏览、点击、热点、心跳、ID 颁发等等，

  3. 图片请求不占用 Ajax 请求限额

  4. GIF 的最低合法体积最小（最小的 BMP 文件需要 74 个字节，PNG 需要 67 个字节，而合法的 GIF，只需要 43 个字节）

  5. 不会阻塞页面加载，影响用户的体验，只要 new Image 对象就好了，一般情况下也不需要 append 到 DOM 中，通过它的 onerror 和 onload 事件来检测发送状态。

例子:

首先要在服务器上放一张 1X1 的 gif 图

1
2
3
4
5
6
7
<script type="text/javascript">
 var thisPage = location.href;
 var referringPage = (document.referrer) ? document.referrer : "none";
 var beacon = new Image();
 beacon.src = "http://img.soogif.com/00VBBS2KfqyZJb18GVJyL9jUuw1iSTDF.gif?page=" + encodeURI(thisPage)
 + "&ref=" + encodeURI(referringPage);
</script>