建站
咨詢
售后
建站咨詢
新聞中心
Cache Manifest是HTML 5的一種緩存機(jī)制，文章作者直接用博客當(dāng)測(cè)試環(huán)境，雖然應(yīng)用起來非常簡(jiǎn)單，但效果卻出奇的好。緩存后的速度，簡(jiǎn)直是驚人的快。像Yslow顯示，打開一個(gè)緩存過的頁(yè)面，只要0.729秒，比不緩存的差不多快了10倍。
昭通網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)從2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
一、Cache Manifest基礎(chǔ)知識(shí)
作為一個(gè)Web開發(fā)相關(guān)的人員，都不會(huì)少聽到、看到Cache這個(gè)詞。是的，上面也已經(jīng)說了，它是一種緩存的機(jī)制。它可以通過一個(gè).manifest文件來配置需要緩存的或者一定要保持聯(lián)網(wǎng)緩存的文件。而重點(diǎn)就是這個(gè).manifest文件，這里進(jìn)行了簡(jiǎn)單的整理：
◆MIME TYPE：text/cache-manifest
◆需要由你創(chuàng)建的：NAME.manifest
◆作用：主要是配置需要緩存的文件
二、如何實(shí)現(xiàn)
實(shí)現(xiàn)起來倒是非常簡(jiǎn)單（當(dāng)然，這也是有問題的，這個(gè)我們后面講解決方案），實(shí)現(xiàn)步驟如下：
1.在服務(wù)器上添加MIME TYPE支
比如 Apache 中可在 .htaccess 中添加：
- AddType text/cache-manifest manifest
2.創(chuàng)建 NAME.manifest:
其中***行的CACHE MANIFEST標(biāo)識(shí)是一定要有的，而CACHE/NETWORK/FACKBACK 都是可選的。如果沒有寫標(biāo)識(shí)，則默認(rèn)緩存，Cache就不用說了，緩存；NETWORK指不想緩存的頁(yè)面，比如登陸頁(yè)等；FALLBACK 是指當(dāng)沒有響應(yīng)時(shí)的替代方案，比如我想請(qǐng)求某個(gè)頁(yè)面，但這個(gè)頁(yè)面的服務(wù)器掛了，那么，我可以顯示另外一個(gè)指定的頁(yè)面，文件結(jié)構(gòu)如下：
- CACHE MANIFEST
- # VERSION 0.3
- # 直接緩存的文件
- CACHE:
- abc.html
- images/sofish.png
- js/main.js
- css/layout.css
- # 需要在時(shí)間在線的文件
- NETWORK:
- /wp-admin/
- # 替代方案
- FALLBACK:
- /ajax/ ajax.html
至于如何更新這個(gè)配置文件？只要改變文件的內(nèi)容即可，上面的# VERSION 0.3其實(shí)只是一行注釋，但改變文件可以重新緩存，這樣寫上版本號(hào)，想更新的時(shí)候修改版本號(hào)來重新緩存，是一種比較推薦的方法，甚至可以是***實(shí)踐。
3.給標(biāo)簽加manifest屬性
是的，就是如此簡(jiǎn)單，相信你花上30分鐘也就了解了，而且能夠快速的應(yīng)用到工作中。
三、Cache Manifest 存在的問題
經(jīng)過上面一整，速度明顯快了許多，幫忙測(cè)試的人也小震驚了一下，只是，還是存在一些問題，看一下，然后我們嘗試解決：
1.自動(dòng)緩存引用了manifest文件的頁(yè)面
即使在 NETWORK 中指定 "*"（所有的頁(yè)面都）使用網(wǎng)絡(luò)，還是不能解決它自動(dòng)緩存當(dāng)前頁(yè)面。這使得這個(gè)頁(yè)面在 manifest 沒有變更的情況下，會(huì)一直以"類靜態(tài)"存在。比如，你后臺(tái)更新了一篇文章，這個(gè)動(dòng)態(tài)的首頁(yè)，還是像***次緩存的時(shí)候一樣，沒有變。這對(duì)于靜態(tài)頁(yè)面還好，但應(yīng)用在一個(gè)動(dòng)態(tài)系統(tǒng)就很麻煩了，因?yàn)槟愕膬?nèi)容是時(shí)時(shí)要更新的。
2.Firefox彈出提示信息
可能是習(xí)慣了彈窗警告之類的，一不小心，用戶還以為是網(wǎng)站被人掛馬呢，想把不干凈的東西存儲(chǔ)到他的電腦。
四、解決方案
（一）關(guān)于自動(dòng)緩存當(dāng)前頁(yè)面
在《Pro HTML5 Programming》有這樣一句話：這并不是Bug，而是機(jī)制的需要。雖然說這樣會(huì)讓頁(yè)面載入更快，但對(duì)于動(dòng)態(tài)頁(yè)面來說就是惡心了。至少應(yīng)該有一種讓用戶選擇是否緩存當(dāng)前頁(yè)的配置方案（或者說是一個(gè)開關(guān)）。不過，這是暫時(shí)不能解決的，畢竟這還只是一個(gè)Draft，我們要用，就應(yīng)該找一個(gè)合適的方案。
我的想法是，看看大家有沒有更好的辦法。結(jié)果，查了一下，無果。新的東西，幾乎所有文章說的都只是我上面說的那個(gè)如何去寫一個(gè)manifest文件，看來還是沒辦法偷懶。然后，便開始想：
◆一定不要緩存動(dòng)態(tài)的頁(yè)面，當(dāng)前頁(yè)一定不能引用 manifest文件。
◆能不能從其他頁(yè)面先載入緩存？
那么，如果有解決方案的話，解決方法應(yīng)該是：
◆不在當(dāng)前頁(yè)面引用manifest。
◆在用戶打開頁(yè)面之前，需要有一個(gè)頁(yè)面來實(shí)現(xiàn)緩存機(jī)制。
如果這樣，那么為何不試一下iframe來引入一個(gè)擁有manifest的靜態(tài)文件？但用 iframe 還能會(huì)緩存到文件？經(jīng)過一翻測(cè)試，Google Chrome的調(diào)試工具給了答案：結(jié)果很不錯(cuò)，成功緩存。做法是這樣的，新建一個(gè)cache.html文件來當(dāng)做為當(dāng)前頁(yè)面的代理，內(nèi)容如下：
cache - hi sofish!
然后，在每個(gè)頁(yè)面通過iframe來引用這個(gè)靜態(tài)文件，以達(dá)到我們不緩存當(dāng)面頁(yè)面，只緩存我們希望緩存文件的目的。
（二）關(guān)于 Firefox 彈出警告問題
這個(gè)，瀏覽器默認(rèn)的，瀏覽器廠商的目的是為用戶的安全著想，我們暫時(shí)也改變不了。其實(shí)，也不會(huì)有太大的影響，我也沒有好好去想。
五、總結(jié)
測(cè)試下來，其實(shí)跟緩存當(dāng)前頁(yè)面還是有差別的，畢竟像站外的鏈接，特別是gravatar總要請(qǐng)求這么多圖片，這點(diǎn)就又多了一點(diǎn)時(shí)間了。這現(xiàn)象主要出現(xiàn)在 Firefox 下，而 Webkit 而表示非常棒，速度幾乎和緩存當(dāng)前面一樣，第二次打開的頁(yè)面，都是瞬間響應(yīng)的，效果非常不錯(cuò)。
網(wǎng)頁(yè)名稱：HTML5緩存機(jī)制：CacheManifest配置實(shí)例
本文路徑：http://www.5511xx.com/article/dpcceie.html
