Img,Script,Link等标签为空可导致页面多余请求

把页面中的img,script,link等标签为空链可以导致页面多余请求的问题,包括IE,Firefox,chrome,Safari!但是相对于img,script跟link的src、href为空时,在IE下不做请求,而Chrome, Safari, 和 Firefox则会出现一次多余的新请求。下面详细讲解一下:

img src为空的情况分析

无论是在html中写入<img src='' />还是在js中通过Image对象建立var img = new Image(); img.src = "";,都会导致向你的服务器多做一次请求。而具体请求的情况分析如下:

  1. 在IE中,这样做会请求一次当前页面所在的目录。如在http://js8.in/demo/a.html 中出现这种空src的标签,会导致重新请求一次:http://js8.in/demo/
  2. 在Safari 和 Chrome中,将请求当前页面本身。
  3. 在Firefox 3.5以前的版本中,有和Safari同样的问题,但是在3.5中修正了这个BUG。
  4. 在Opera 中,不会做额外的请求。 在一个访问量不高的网站中,多一个这样的请求也无所谓(甚至可以让你的网站浏览看上去翻番),但在一个千万级访问量甚至更高的WEB站点里,这样会导致你的服务器和带宽的成本显著增加。 另外一个隐患是,重新请求某个页面可能会导致用户的一些信息被无意中修改,例如cookies,或者ajax操作。

你永远不会写出这样的代码?

我并不这么认为,很多时候这种情况在无意中出现,比如下面这段php代码:

![]($imageUrl)

你原计划是从服务器端读取这个src地址,但是由于某个原因,这个地址还未设置,或者代码的BUG导致读取失败,就会出现空的src标签。

其他的标签中的空src会不会导致这样的问题?

好消息是,在IE中只有image标签有这个问题。
坏消息是,在Chrome, Safari, 和 Firefox中<script src=""><link href="">都会导致出现一个新的请求。

如何解决这个问题?

可以从两方面着手,一是尽量避免这种坏的编程方式,不要出现空的src标签。另外,可以从服务器端着手,在发现时这种无意义的请求时不要返回任何东西给客户端。

<?php
    $referrer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '';
    $url = "http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI'];
    if ($referrer == $url){
        exit;
    }
?>