new Image() 打点注意事项

网站分析中，我们经常会用 new Image()的方式向服务器发送一条打点消息，例如：

new Image().src = "http://www.mogujie.com/1.gif?a=1&b=2&c=xxx";

这种方式简单易用，因而被广泛采用。但上面这段代码的问题是这个 new Image()是一个没有引用的临时变量，随时可能被浏览器的垃圾回收机制回收。如果这个图片的 HTTP 请求尚未建立，那么在被回收时这个请求就会被取消，导致打点并没有真正发出。如果打点所在的页面比较复杂，浏览器垃圾回收机制可能会被频繁触发，那么这种方式打点的丢失率可能会高达 10%以上。

在另外哪片文章里写丢失率有 15%,

http://www.75team.com/archives/170 如果踩到坑此坑，那么随着页面业务的复杂，可能会少统计 15%左右的有效数据。

还有说 5%的,这个具体有多少还需要考证。

行骏说道(2013-3-30 22:22) 的确存在这个问题，曾经在 alibaba.com 一个流量较大的页面上做过这个实验，差值在 5%左右。

解决方法很简单，将这个图片赋值给一个全局变量即可，例如：

var img = new Image();
var rnd_id = "_img_" + Math.random();

window[rnd_id] = img; // 全局变量引用

img.onload = img.onerror = function () {
  window[rnd_id] = null; // 删除全局变量引用
};

img.src = "http://www.mogujie.com/1.gif?a=1&b=2&c=xxx";

看了几个腾讯的几个页面的统计里都没有做这样的处理，不知道是什么情况。

另外打点时机也需要注意，如果是在页面跳转的时候打点还需要注意另外一个页面释放导致打点中断丢失的问题。这里不做记录了。

哈，早于 2012 年好像就有这样的解决方案了，我司现在才用起来，差距额。

reference​

reference