1.背景介紹

什么是應用程序緩存（Application Cache）？

網頁必須在有網時才能使用，HTML5引入了應用程序緩存，這意味著web應用可進行緩存，并可在沒有因特網連接時進行訪問。

2.知識剖析

a.使用方法:

在html標簽中引入manifest文件:

這個文件中存儲了服務器希望緩存的文件列表:

manifest文件結構

b.更新緩存:

在有網時，以下條件觸發緩存的更新

1.用戶清空瀏覽器緩存

2.manifest文件被修改

3.由程序來更新應用緩存

c.緩存流程:

利用一個manifest清單文件告知服務器需要離線的網頁文件。

在第一次訪問網站時服務器響應manifest文件進行緩存。

在第二次訪問該網址時，檢測是否達到更新緩存的條件，否則直接使用緩存文件（即使你修改了服務器上的文件）。

d.注意

HTML5應用緩存特性已經從Web標準中刪除，雖然一些瀏覽器目前仍然支持它，但也許會在未來的某個時間停止支持，請盡量不要使用該特性。

點擊查看詳情

3.常見問題

離線存儲有什么優缺點？

優點

1.離線瀏覽-用戶可在應用離線時使用它們

2.速度-已緩存資源加載得更快

3.減少服務器負載-瀏覽器將只從服務器下載更新過或更改過的資源。

缺點

1.更新的資源，需要二次刷新才會被頁面采用

2.不支持增量更新，只有manifest發生變化，所有資源全部重新下載一次

3.缺乏足夠容錯機制，當清單中任意資源文件出現加載異常，都會導致整個manifest策略運行異常

4.編碼實戰

這里是一個離線存儲的demo

demo

5.擴展思考

存儲網頁數據的方式？

1.localStorage-沒有時間限制的數據存儲(永久),對于同一個瀏覽，當用戶關閉瀏覽器窗口后，數據不會被刪除。

2.sessionStorage -針對一個session的數據存儲(sesion/),當用戶關閉瀏覽器窗口后，數據會被刪除。

3.cookie：不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得cookie速度很慢而且效率也不高。

6.參考文獻

1.參考一:慕課網-manifest

2.參考二:MDN-manifest

3.參考三:知乎-關于前端緩存優化，為什么沒人用manifest？