如何避免重复的http请求

做网页时，经常会产生大量重复http请求，http请求十分浪费服务器资源，下面给出三种导致重复请求的情景，希望大家能够有所启示

 

一、IE6不缓存背景图片

a{ background:url(images/normal.gif); } a:hover { background:url(images/hover.gif); }

 

如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，IE6在这里有一个bug，它每次都从服务器端读取背景图片,也就是说IE6不缓存

背景图片。

 

IE7，IE8已经修复了这个bug。

 

可通过添加一段javascript脚本来解决这个问题

<script type="text/javascript">try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}</script>

 

document.execCommand 还有很多其他用法，网上资料很多，感兴趣的可以看看

 

二、innerHTML需要注意“+=”操作符

 

首先解释一下innerHTML+=是如何工作的

 

var box=document.getElementById("box");
box.innerHTML = "a";
box.innerHTML += "b";

 

这个过程相当于

 

var box=document.getElementById("box");
box.innerHTML = "a";
box.innerHTML = "";
var c= "a"+"b";
box.innerHTML = c;

 

按照如上解释 ，如果box这个元素中原来有img元素，当使用box.innerHTML+=""后，会导致原来的img被重新加载图片

但是ie对innerHTML的执行很怪异

 

1、连续的多个innerHTML+=操作，ie会先合并内容，再对合并后的内容处理，如果innerHTML内有img，会向服务器请求图片

eg：
 for(var i=0;i<3;i++)
   box.innerHTML+= "<img src='exam.jpg'>"

 

最终请求的是3个图片，而不是6个

 

测试的时候，请将内容放到window.onload中，如果在页面没有加载完成前调用这个，假设页面上有同样的img，则页面上会直接读缓存

 

实验显示：这个合并个数有上限，上限个数不清楚（可能和机器配置，ie版本等有关），超过上限后如何操作不清楚

 

2、当回调操作中使用innerHTML+=操作时，ie不向服务器请求资源
eg：
 

 var handle=setInterval(function(){insert();},500);
 function insert(box)
 {
    box.innerHTML += "<img src='exam.jpg'>";
 }

 

这样用法没有向服务器发请求

 

总结：

innerHTML += 的问题只在IE中会出现，解决的问题可以使用IE下的insertAdjacentHTML方法代替

 

insertAdjacentHTML 方法是将新内容直接追加到原有内容的后面，而不是清空innerHTML的内容再重复赋值，这样可以避免原innerHTML中的图片被重新加载的问题

 

三、少用location.reload()

使用location.reload() 会刷新页面，刷新页面时页面所有资源（css，js，img等）会重新请求服务器

建议使用：location.href="当前页url" 代替location.reload() ,使用location.href 浏览器会读取本地缓存资源