HTML5緩存機制中如何進行CacheManifest配置

這篇文章給大家介紹HTML 5緩存機制中如何進行Cache Manifest配置，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)是一家集網站建設,龍南企業(yè)網站建設,龍南品牌網站建設,網站定制,龍南網站建設報價,網絡營銷,網絡優(yōu)化,龍南網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。

Cache Manifest是HTML 5的一種緩存機制，文章作者直接用博客當測試環(huán)境，雖然應用起來非常簡單，但效果卻出奇的好。緩存后的速度，簡直是驚人的快。像Yslow顯示，打開一個緩存過的頁面，只要0.729秒，比不緩存的差不多快了10倍。

一、Cache Manifest基礎知識

作為一個Web開發(fā)相關的人員，都不會少聽到、看到Cache這個詞。是的，上面也已經說了，它是一種緩存的機制。它可以通過一個.manifest文件來配置需要緩存的或者一定要保持聯(lián)網緩存的文件。而重點就是這個.manifest文件，這里進行了簡單的整理：

◆MIME TYPE：text/cache-manifest

◆需要由你創(chuàng)建的：NAME.manifest

◆作用：主要是配置需要緩存的文件

二、如何實現(xiàn)

實現(xiàn)起來倒是非常簡單（當然，這也是有問題的，這個我們后面講解決方案），實現(xiàn)步驟如下：

1.在服務器上添加MIME TYPE支

比如 Apache 中可在 .htaccess 中添加：

AddType text/cache-manifest manifest

2.創(chuàng)建 NAME.manifest:
 
其中***行的CACHE MANIFEST標識是一定要有的，而CACHE/NETWORK/FACKBACK 都是可選的。如果沒有寫標識，則默認緩存，Cache就不用說了，緩存；NETWORK指不想緩存的頁面，比如登陸頁等；FALLBACK 是指當沒有響應時的替代方案，比如我想請求某個頁面，但這個頁面的服務器掛了，那么，我可以顯示另外一個指定的頁面，文件結構如下：

CACHE MANIFEST   # VERSION 0.3   # 直接緩存的文件  CACHE:  abc.html  images/sofish.png  js/main.js  css/layout.css   # 需要在時間在線的文件  NETWORK:  /wp-admin/   # 替代方案  FALLBACK:  /ajax/ ajax.html

至于如何更新這個配置文件？只要改變文件的內容即可，上面的# VERSION 0.3其實只是一行注釋，但改變文件可以重新緩存，這樣寫上版本號，想更新的時候修改版本號來重新緩存，是一種比較推薦的方法，甚至可以是***實踐。

3.給標簽加manifest屬性

是的，就是如此簡單，相信你花上30分鐘也就了解了，而且能夠快速的應用到工作中。

三、Cache Manifest 存在的問題

經過上面一整，速度明顯快了許多，幫忙測試的人也小震驚了一下，只是，還是存在一些問題，看一下，然后我們嘗試解決：

1.自動緩存引用了manifest文件的頁面

即使在 NETWORK 中指定 "*"（所有的頁面都）使用網絡，還是不能解決它自動緩存當前頁面。這使得這個頁面在 manifest 沒有變更的情況下，會一直以"類靜態(tài)"存在。比如，你后臺更新了一篇文章，這個動態(tài)的首頁，還是像***次緩存的時候一樣，沒有變。這對于靜態(tài)頁面還好，但應用在一個動態(tài)系統(tǒng)就很麻煩了，因為你的內容是時時要更新的。

2.Firefox彈出提示信息

可能是習慣了彈窗警告之類的，一不小心，用戶還以為是網站被人掛馬呢，想把不干凈的東西存儲到他的電腦。

四、解決方案

（一）關于自動緩存當前頁面

在《Pro HTML5 Programming》有這樣一句話：這并不是Bug，而是機制的需要。雖然說這樣會讓頁面載入更快，但對于動態(tài)頁面來說就是惡心了。至少應該有一種讓用戶選擇是否緩存當前頁的配置方案（或者說是一個開關）。不過，這是暫時不能解決的，畢竟這還只是一個Draft，我們要用，就應該找一個合適的方案。

我的想法是，看看大家有沒有更好的辦法。結果，查了一下，無果。新的東西，幾乎所有文章說的都只是我上面說的那個如何去寫一個manifest文件，看來還是沒辦法偷懶。然后，便開始想：

◆一定不要緩存動態(tài)的頁面，當前頁一定不能引用 manifest文件。

◆能不能從其他頁面先載入緩存？

那么，如果有解決方案的話，解決方法應該是：

◆不在當前頁面引用manifest。

◆在用戶打開頁面之前，需要有一個頁面來實現(xiàn)緩存機制。

如果這樣，那么為何不試一下iframe來引入一個擁有manifest的靜態(tài)文件？但用 iframe 還能會緩存到文件？經過一翻測試，Google Chrome的調試工具給了答案：結果很不錯，成功緩存。做法是這樣的，新建一個cache.html文件來當做為當前頁面的代理，內容如下：

                       hi sofish!   

然后，在每個頁面通過iframe來引用這個靜態(tài)文件，以達到我們不緩存當面頁面，只緩存我們希望緩存文件的目的。

（二）關于 Firefox 彈出警告問題

這個，瀏覽器默認的，瀏覽器廠商的目的是為用戶的安全著想，我們暫時也改變不了。其實，也不會有太大的影響，我也沒有好好去想。

測試下來，其實跟緩存當前頁面還是有差別的，畢竟像站外的鏈接，特別是gravatar總要請求這么多圖片，這點就又多了一點時間了。這現(xiàn)象主要出現(xiàn)在 Firefox 下，而 Webkit 而表示非常棒，速度幾乎和緩存當前面一樣，第二次打開的頁面，都是瞬間響應的，效果非常不錯。

關于HTML 5緩存機制中如何進行Cache Manifest配置就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

本文標題：HTML5緩存機制中如何進行CacheManifest配置
本文網址：http://m.jiaotiyi.com/article/gjjpco.html