HTML5 API详解(11)：Cache 应用程序缓存，这下离线也可以玩了
Web緩存是指一個Web資源（如html頁面，圖片，js，數據等）存在于Web服務器和客戶端（瀏覽器）之間的副本。緩存會根據進來的請求保存輸出內容的副本；當下一個請求來到的時候，如果是相同的URL，緩存會根據緩存機制決定是直接使用副本響應訪問請求，還是向源服務器再次發送請求。比較常見的就是瀏覽器會緩存訪問過網站的網頁，當再次訪問這個URL地址的時候，如果網頁沒有更新，就不會再次下載網頁，而是直接使用本地緩存的網頁。
Web緩存的作用
使用Web緩存的作用其實是非常顯而易見的：
1.減少網絡帶寬消耗
無論對于網站運營者或者用戶，帶寬都代表著金錢，過多的帶寬消耗，只會便宜了網絡運營商。當Web緩存副本被使用時，只會產生極小的網絡流量，可以有效的降低運營成本。
2.降低服務器壓力
給網絡資源設定有效期之后，用戶可以重復使用本地的緩存，減少對源服務器的請求，間接降低服務器的壓力。同時，搜索引擎的爬蟲機器人也能根據過期機制降低爬取的頻率，也能有效降低服務器的壓力。
3.減少網絡延遲，加快頁面打開速度
帶寬對于個人網站運營者來說是十分重要，而對于大型的互聯網公司來說，可能有時因為錢多而真的不在乎。那Web緩存還有作用嗎？答案是肯定的，對于最終用戶，緩存的使用能夠明顯加快頁面打開速度，達到更好的體驗。特別是移動端沒wifi的情況下。
cache用法：
1.首先要在請在文檔的 <html> 標簽中包含 manifest 屬性：<html manifest="/root/demo.appcache">
每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性，則頁面不會被緩存。
2.manifest 文件的建議的文件擴展名是：".appcache"。請注意，manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置（不懂就讓后端開發人員設置一下唄）。
3.編寫manifest文件
CACHE MANIFEST
#version2.1
CACHE:
/static/wap/js/zepto.min.js
/static/wap/css/animations.css
/static/wap/images/loading.gif
NETWORK:
/static/wap/css/base.wap.css
/static/wap/css/details.wap.css
FAILBACK :
/html5/ /404.html
必須聲明CACHE MANIFEST在第一行，#是注釋，最大的作用是緩存文件更新了，客戶端無法更新主動更新緩存的時候，修改注釋信息也可以出發客戶端瀏覽器重新加載所有緩存的文件。
CACHE 指定緩存的文件，路徑相當于manifest文件的路徑。
NETWORK 指定不緩存的文件，每次都從服務器獲取，如果不指定，在使用manifest的文檔，不指定則默認為cache緩存
FAILBACK 指定第一個 URI 是資源，第二個是替補。
這樣就實現了cache應用緩存了！
如何更新緩存
如下三種方式，可以更新緩存：
1.更新manifest文件
2.通過javascript操作
3.清除瀏覽器緩存（要用戶自己這樣操作是不可能的啦）
給manifest添加或刪除文件，都可更新緩存，如果我們更改了js，而沒有新增或刪除，前面例子中注釋中的版本號，可以很好的用來更新manifest文件。html5中引入了js操作離線緩存的方法，下面的js可以手動更新本地緩存。window.applicationCache.update();
使用總結：
1.有ajax請求的地址也要單獨寫上去，請求不確定的情況下最好寫上*號。
2.緩存文件更新控制不靈活，每次修改文件的時候要順帶修改cache文件，無疑是增加了維護成本。就目前HTML5提供的manifest機制來講，一個頁面只能引用一個manifest頁面，而且一旦發現這個manifest改變了，就會把里面所有定義的緩存文件全部重新拉取一遍，不管實際上有沒有更新，控制比較不靈活。針對這個問題，也有的同學提出了一些建議，比如把需要緩存的文件分模塊切分到不同manifest中，并分開用HTML引用，再使用強大的iframe嵌入到入口頁面，這樣就當某一個模式需要有更新，不會導致其他模塊的文件也重新拉取一遍。
3.站點離線存儲的容量限制是5M，超過5M的會緩存失敗
4. 系統會自動緩存引用清單文件的 HTML 文件
5.引用manifest的html必須與manifest文件同源，在同一個域下
6.站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問
7. 當manifest文件發生改變時，資源請求本身也會觸發更新
總結
以上是生活随笔為你收集整理的HTML5 API详解(11)：Cache 应用程序缓存，这下离线也可以玩了的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 薪酬最高十职位：工程师最吃香
- 下一篇： HTML5 API详解（15）:Hist