浏览器缓存的研究
1. 概述
1.1. 说明
浏览器默认情况下缓存是开启的，当我们向服务器发送某个请求并正确返回（状态码为 200 ）的时候，返回的内容（包括页面、图片、 css 文件、 js 文件、 xml 文件等）是自动被缓存的。这样在以后需要请求同样内容的时候，浏览器会先从缓存中查找，如果缓存的内容没有过期，则直接返回缓存的内容，否则则会去服务器再请求一次并返回结果并在浏览器缓存。（如果是刷新页面的情况，则会去服务器检查一次浏览器缓存的内容是否已经有新的更新，如果有新的更新，则重新返回新的内容并缓存，否则（状态码为 304 ）则直接从浏览器缓存中取得内容。）
我们的需求只是在第一次请求页面的时候，把以后将要加载的较大文件一次性加载完成并缓存在浏览的缓存中，这样以后访问页面请求同样内容的时候就会直接从缓存中取得了。
由于缓存文件存放在硬盘上一个隐藏目录，所以，即使断电或重启电脑之后，缓存的内容依然存在依然可用。
2. 图片缓存
2.1. 预加载图片代码
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
function loadImage(url, callback) {
var img = new Image(); // 创建一个 Image 对象，实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理 onload 事件
}
img.onload = function () { // 图片下载完毕时异步调用 callback 函数。
callback.call(img);// 将回调函数的 this 替换为 Image 对象
};
};
/*function f(){
$('#imgdiv23').append(this);
$('#imgdiv2').append(this);
}*/
</script>
</head>
<body onload="loadImage('http://www.yunnany.cn/jingdiandaquan/UploadFiles_2558/200809/20080901110309997.jpg',function(){alert(' 加载图片完成！ ' + this.width)})">
<div id="imgdiv23"></div>
fdsfsafadsf
<div></div>
</body>
</html>
2.2. 预加载页面截图
2.2.1. 首次加载
只是加载图片，并不显示图片。
加载中
加载完成（显示图片的宽度）
2.3. 其它页面的代码
该页面加载一张图片，该图片与上面预加载的图片 url 一样。
<html>
<head>
</head>
<body>
<div><img src="http://www.yunnany.cn/jingdiandaquan/UploadFiles_2558/200809/20080901110309997.jpg"/></div>
</body>
</html>
2.4. 其它页面截图
该图片会从浏览器缓存中直接读取，瞬间加载完成。
加载完成
3. XML 文件缓存
3.1. 说明
对于 xml 文件是否是从缓存读取的方法是通过 firefox 的 httpfox 插件观察 http 请求 header 信息（服务器端响应状态码）来完成的。
3.2. 页面代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> 无标题页 </title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({url:"http://www.testserver.com:8080/fckeditor/test.xml ",
success:function(xml){
$(xml).find("province").each(function(){
var t = $(this).attr("name");//this->
$("#DropProvince").append("<option>"+t+"</option>");
});
}
});
$("#DropProvince").change(function(){
$("#sCity>option").remove();
var pname = $("#DropProvince").val();
$.ajax({url:"City.xml",
success:function(xml){
$(xml).find("province[name='"+pname+"']>city").each(function(){
$("#sCity").append("<option>"+$(this).text()+"</option>");
});
}
});
});
});
</script>
</head>
<body>
<form id="form1">
<div>
<select id="DropProvince" style="width:60px;">
<option> 请选择 </option>
</select>
<select id="sCity" style="width:60px;">
</select>
</div>
</form>
</body>
</html>
3.3. 截图
通过比较可以发现首次加载之后再次加载页面的时候， xml 文件是直接从浏览器缓存中获取的。
首次加载的时候状态码为 200 。（ Result 列）
首次加载
再次加载的时候 Result 列为（ Cache ）。
再次加载