做网页时，经常会产生大量重复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";
box.innerHTML = "a";
box.innerHTML += "b";
这个过程相当于
var box=document.getElementById("box");
box.innerHTML = "a";
box.innerHTML = "";
var c= "a"+"b";
box.innerHTML = c;
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'>"
for(var i=0;i<3;i++)
box.innerHTML+= "<img src='exam.jpg'>"
最终请求的是3个图片，而不是6个
测试的时候，请将内容放到window.onload中，如果在页面没有加载完成前调用这个，假设页面上有同样的img，则页面上会直接读缓存
实验显示：这个合并个数有上限，上限个数不清楚（可能和机器配置，ie版本等有关），超过上限后如何操作不清楚
2、当回调操作中使用innerHTML+=操作时，ie不向服务器请求资源
eg：
eg：
var handle=setInterval(function(){insert();},500);
function insert(box)
{
box.innerHTML += "<img src='exam.jpg'>";
}
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 浏览器会读取本地缓存资源