哈哈小老虎's Blog

看到NCZ的这篇文章: Empty image src can destroy your site, 受益不少, 在这里总结一下!

一. 测试环境

浏览器: IE6+, FF 3.5.5, Opera 10.00 Beta 2, Chrome 4.0.249.11, Safari 4.0.3

OS: winXP 32

二. 空图像

当img元素的src属性被设置为空字符串时, 空图像就产生了, 它有两种形式:

1. html形式

<img src="" />

2. js形式

var oImg = new Image(); oImg.src="";

三. 浏览器对空图像的处理态度

1. IE6,7,8: 空图像会向当前页面所在的目录发起一次请求, 如http://www.mytcer.com/demo/test.html中有一个空图像, 那么它会请求http://www.mytcer.com/demo/;

2. Safari 4(据作者测试, FF3及其之前版本也有这个问题): 空图像会向当前页面发起一个请求, 如http://www.mytcer.com/demo/test.html中有一个空图像, 那么它会请求http://www.mytcer.com/demo/test.html;

3. FF 3.5, Chrome 4, Opera 10: 他们会忽略空图像, 不会产生请求.

4. 我的测试截图:

三. 空图像导致的问题

它至少会导致两个问题:

1. 会产生一个无效的请求, 比如在IE下;

2. 在Safari4, FF3中, 会产生一些额外的请求: 由于在这些浏览器下, 空图像会将当前页面请求一次, 这等于是对同一个页面请求了两次. 对于一些pv较小的站点来说(比如我的blog), 这可能不会产生大的影响, 但对于那些pv很高的站点(比如淘宝首页), 这无疑会给服务器带来很大的压力.

四. 其他可引用外部资源的标签, 情况如何呢?