站長資訊網一、應用場景
我們通常使用瀏覽器緩存在用戶磁盤上存儲web單頁，在用戶再次瀏覽的時候已節省帶寬，但即便這樣，依然無法在沒有Internet的情況下訪問Web。為了讓web應用程序在離線狀態也能被訪問。html5通過application cache API提供離線存儲功能。前提是你需要訪問的web頁面至少被在線訪問過一次。
離線本地存儲和傳統的瀏覽器緩存有什么不同呢？
1、瀏覽器緩存主要包含兩類：
a.緩存協商：Last-modified,Etag
瀏覽器向服務器詢問頁面是否被修改過，如果沒有修改就返回304，瀏覽器直接瀏覽本地緩存文件。否則服務器返回新內容。
b.徹底緩存：cache-control,Expires
通過Expires設置緩存失效時間，在失效之前不需要再跟服務器請求交互。
2、離線存儲為整個web提供服務，瀏覽器緩存只緩存單個頁面；
3、離線存儲可以指定需要緩存的文件和哪些文件只能在線瀏覽，瀏覽器緩存無法指定；
4、離線存儲可以動態通知用戶進行更新。
二、如何實現
離線存儲是通過manifest文件來管理的，需要服務器端的支持，不同的服務器開啟支持的方式也是不同的。
CACHE MANIFEST//必須以這個開頭 version 1.0 //最好定義版本，更新的時候只需修改版本號 CACHE: m.png test.js test.css NETWORK: * FALLBACK online.html offline.html
CACHE指定需要緩存的文件；NETWORK指定只有通過聯網才能瀏覽的文件，*代表除了在CACHE中的文件；FALLBACK每行分別指定在線和離線時使用的文件
要讓manifest管理存儲，還需要在html標簽中定義manifest屬性，如下：
<!DOCTYPE HTML>
<html lang="en" manifest='test.manifest'>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
最后別忘了，這些應用需要服務器支持。
Apache服務器開啟支持的方式是：在conf/mime.types中添加一段代碼：
test/cache-manifest manifest
IIS服務器開啟方式：
右鍵–HTTP—MIME映射下，單擊文件類型—新建—擴展名輸入manifest，類型中輸入test/cache-manifest
三、通過JS動態控制更新
applicationCache對象提供個了一些方法和事件，管理離線存儲的交互過程。通過在firefox8.0的控制臺中輸入window.applicationCache可以看到這個對象的所
有屬性和事件方法。
applicationCache.onchecking = function(){ //檢查manifest文件是否存在 } applicationCache.ondownloading = function(){ //檢查到有manifest或者manifest文件 //已更新就執行下載操作 //即使需要緩存的文件在請求時服務器已經返回過了 } applicationCache.onnoupdate = function(){ //返回304表示沒有更新，通知瀏覽器直接使用本地文件 } applicationCache.onprogress = function(){ //下載的時候周期性的觸發，可以通過它 //獲取已經下載的文件個數 } applicationCache.oncached = function(){ //下載結束后觸發，表示緩存成功 } application.onupdateready = function(){ //第二次載入，如果manifest被更新 //在下載結束時候觸發 //不觸發onchched alert("本地緩存正在更新中。。。"); if(confirm("是否重新載入已更新文件")){ applicationCache.swapCache(); location.reload(); } } applicationCache.onobsolete = function(){ //未找到文件，返回404或者401時候觸發 } applicationCache.onerror = function(){ //其他和離線存儲有關的錯誤 }
四、瀏覽器與服務器的交互
曾經有面試題是這樣的："描述在瀏覽器的地址欄中輸入:www.baidu.com 后發生了什么？"。
1、服務端返回baidu頁面資源，瀏覽器載入html
2、瀏覽器開始解析
3、發現link，發送請求載入css文件
4、瀏覽器渲染頁面
5、發現圖片，發送請求載入圖片，并重新渲染
6、發送請求js文件，阻塞渲染。如果js對dom進行了操作，則會進行rerender
對于支持離線存儲的頁面，瀏覽器和服務器的交互又是如何呢？
首次載入頁面：
1-6 ： 同上
7：請求頁面中需要緩存的頁面和數據，就算在之前的步驟中已經請求過（這是個耗能的地方）
8：服務器返回所有請求文件，瀏覽器進行本地存儲
再次載入頁面：
1：發送請求
2：使用本地存儲的離線文件
3：解析頁面
4：請求服務端的manifest文件，判斷是否有改變，返回304則表示沒有改變進入步驟5，否則進入步驟6
5：進入首次載入頁面的7-8
6：使用本地存儲，不重新請求
