1. 概述

1.1. 說明

瀏覽器默認情況下緩存是開啟的，當我們向服務器發(fā)送某個請求并正確返回（狀態(tài)碼為 200 ）的時候，返回的內容（包括頁面、圖片、 css 文件、 js 文件、 xml 文件等）是自動被緩存的。這樣在以后需要請求同樣內容的時候，瀏覽器會先從緩存中查找，如果緩存的內容沒有過期，則直接返回緩存的內容，否則則會去服務器再請求一次并返回結果并在瀏覽器緩存。（如果是刷新頁面的情況，則會去服務器檢查一次瀏覽器緩存的內容是否已經有新的更新，如果有新的更新，則重新返回新的內容并緩存，否則（狀態(tài)碼為 304 ）則直接從瀏覽器緩存中取得內容。）

我們的需求只是在第一次請求頁面的時候，把以后將要加載的較大文件一次性加載完成并緩存在瀏覽的緩存中，這樣以后訪問頁面請求同樣內容的時候就會直接從緩存中取得了。

由于緩存文件存放在硬盤上一個隱藏目錄，所以，即使斷電或重啟電腦之后，緩存的內容依然存在依然可用。

2. 圖片緩存

2.1. 預加載圖片代碼

Html代碼

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
function loadImage(url, callback) {
var img = new Image(); // 創(chuàng)建一個 Image 對象，實現(xiàn)圖片的預下載
img.src = url;
if (img.complete) { // 如果圖片已經存在于瀏覽器緩存，直接調用回調函數(shù)
callback.call(img);
return; // 直接返回，不用再處理 onload 事件
}
img.onload = function () { // 圖片下載完畢時異步調用 callback 函數(shù)。
callback.call(img);// 將回調函數(shù)的 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>

<html><head><script type="text/javascript" src="jquery.js"></script><script>function loadImage(url, callback) {var img = new Image(); // 創(chuàng)建一個 Image 對象，實現(xiàn)圖片的預下載img.src = url;if (img.complete) { // 如果圖片已經存在于瀏覽器緩存，直接調用回調函數(shù)callback.call(img);return; // 直接返回，不用再處理 onload 事件}img.onload = function () { // 圖片下載完畢時異步調用 callback 函數(shù)。callback.call(img);// 將回調函數(shù)的 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代碼

<html>
<head>
</head>
<body>
<div><img src="http://www.yunnany.cn/jingdiandaquan/UploadFiles_2558/200809/20080901110309997.jpg"/></div>
</body>
</html>

<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 信息（服務器端響應狀態(tài)碼）來完成的。

3.2. 頁面代碼

Html代碼

<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>

<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>