使用new Image()打点时的一个注意事项

2013-03-29

本文源自http://hi.baidu.com/meizz/blog/item/a0f4fc0ae9d8be1694ca6b05.html,但是不幸的是这篇文章已经不能访问了,因此我在这儿将它的要点整理一下。

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

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

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

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

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://log.mysite.com/1.gif?a=1&b=2&c=xxx";
知识共享许可协议
本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
分类: 编程 标签: JavaScript
前一篇: 用户体验的数据与数据的用户体验
后一篇: 关于切尾均值

相关文章:

评论:

swaydeng
在 2013-03-29 23:19 写道:

确实,很周到的设计。
btw,第4行的 'img' 拼错了。

回复
oldj
在 2013-03-29 23:54 写道:

果然拼错了,已更正,多谢!:)

回复
vvg
在 2013-03-29 23:27 写道:

打点主要是用来干什么?请指教

回复
oldj
在 2013-03-29 23:57 写道:

一般用来收集用户访问日志,然后从这些日志中分析用户的行为,可以参考Google Analytics之类的系统。

回复
行骏
在 2013-03-30 22:22 写道:

的确存在这个问题,曾经在alibaba.com一个流量较大的页面上做过这个实验,差值在5%左右。

回复
关于使用JavaScript脚本记录用户鼠标点击行为 | oldj's blog
在 2014-02-24 17:17 写道:

[…] img 就会被强制回收,请求也就发不出去了。关于这个问题,可以参考这个页面。比较好的做法是,先将 img 在某个全局变量中引用,等 img onload 或 onerror […]

回复

发表评论:

电子邮件地址不会被公开。 必填项已用 * 标注。