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 οnlοad="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 )。
再次加载