自從翻譯了《解讀 HTML5：建議、技巧和技術(shù)》，就一直沒有時間去看 HTML5 相關(guān)的東西。上周一次偶然的工作間隙折騰了下 Cache Manifest 。當(dāng)時直接拿博客當(dāng)測試環(huán)境，雖然應(yīng)用起來非常簡單，但效果卻出奇的好。緩存后的速度，簡直是驚人的快。像 Yslow 顯示，打開一個緩存過的頁面，只要0.729秒，比不緩存的差不多快了10倍，當(dāng)時就震驚了，想深入了解一下。
一、什么是 Cache Manifest
話說，作為一個 web 開發(fā)相關(guān)的人員，都不會少聽到、看到 cache 這個詞。是的，上面也已經(jīng)說了，它是一種緩存的機制。它可以通過一個 .manifest 文件來配置需要緩存的或者一定要保持聯(lián)網(wǎng)緩存的文件。而重點就是這個 .manifest 文件，具體的可以 Google 一下，而簡單的我?guī)湍阏硪幌卢F(xiàn)在可能會希望了解的東西：
MIME TYPE：text/cache-manifest
需要由你創(chuàng)建的：NAME.manifest
作用：主要是配置需要緩存的文件
二、如何實現(xiàn)
實現(xiàn)起來倒是非常簡單(當(dāng)然，這也是有問題的，這個我們后面講解決方案)，實現(xiàn)步驟如下：
在服務(wù)器上添加MIME TYPE支:
比如 Apache 中可在 .htaccess 中添加：
AddType text/cache-manifest manifest
創(chuàng)建 NAME.manifest:
其中第一行的 CACHE MANIFEST 標(biāo)識是一定要有的，而 CACHE / NETWORK / FACKBACK 都是可選的。如果沒有寫標(biāo)識，則默認(rèn)緩存，CACHE 就不用說了，緩存;NETWORK 指不想緩存的頁面，比如登陸頁等;FALLBACK 是指當(dāng)沒有響應(yīng)時的替代方案，比如我想請求某個頁面，但這個頁面的服務(wù)器掛了，那么，我可以顯示另外一個指定的頁面，文件結(jié)構(gòu)如下：
CACHE MANIFEST
# VERSION 0.3
# 直接緩存的文件
CACHE:
abc.html
images/sofish.png
js/main.js
css/layout.css
# 需要在時間在線的文件
NETWORK:
/wp-admin/
# 替代方案
FALLBACK:
/ajax/ ajax.html
至于如何更新這個配置文件?只要改變文件的內(nèi)容即可，上面的 # VERSION 0.3 其實只是一行注釋，但改變文件可以重新緩存，這樣寫上版本號，想更新的時候修改版本號來重新緩存，是一種比較推薦的方法，甚至可以是最佳實踐。
給 標(biāo)簽加 manifest 屬性：
是的，就是如此簡單，相信你花上30分鐘也就了解了。當(dāng)時我也這樣。隨后也很快地應(yīng)用上去。結(jié)果。結(jié)果就是像這篇文章一樣還沒寫完，但沒有時間折騰，而是速速把它撤下，等問題解決后再應(yīng)用。
三、Cache Manifest 存在的問題
經(jīng)過上面一整，速度當(dāng)然爽，幫忙測試的人也小震驚了一下，只是，還是存在一些問題，看一下，然后我們嘗試解決：
自動緩存引用了 manifest 文件的頁面
即使在 NETWORK 中指定 "*"(所有的頁面都)使用網(wǎng)絡(luò)，還是不能解決它自動緩存當(dāng)前頁面。這使得這個頁面在 manifest 沒有變更的情況下，會一直以"類靜態(tài)"存在。比如，你后臺更新了一篇文章，這個動態(tài)的首頁，還是像第一次緩存的時候一樣，沒有變。這對于靜態(tài)頁面還好，但應(yīng)用在一個動態(tài)系統(tǒng)就很麻煩了，因為你的內(nèi)容是時時要更新的。
Firefox 彈出提示信息
可能是習(xí)慣了彈窗警告之類的，一不小心，用戶還以為是網(wǎng)站被人掛馬呢，想把不干凈的東西存儲到他的電腦。
四、解決方案
(一)關(guān)于自動緩存當(dāng)前頁面
我查了 w3c 的文檔，也看了 《Pro HTML5 Programming》的第10章(Creating HTML5 Offline Web Applications)，最后還是 div into HTML5 的那句話，原意大概是：這并不是 Bug，而是機制的需要。
真是杯具，反正我能理解到的是，這是一種強加的功能。雖然說這樣會讓頁面載入更快，但對于動態(tài)頁面來說就是惡心了。至少應(yīng)該有一種讓用戶選擇是否緩存當(dāng)前頁的配置方案(或者說是一個開關(guān))。不過，這是暫時不能解決的，畢竟這還只是一個 Draft，我們要用，就應(yīng)用找一個合適的方案。
我的想法是，看看大家有沒有更好的辦法。結(jié)果，查了一下，無果。新的東西，幾乎所有文章說的都只是我上面說的那個如何去寫一個 manifest 文件，看來還是沒辦法偷懶。然后，便開始想：
一定不要緩存動態(tài)的頁面，當(dāng)前頁一定不能引用 manifest文件
能不能從其他頁面先載入緩存?
那么，如果有解決方案的話，解決方法應(yīng)該是：
不在當(dāng)前頁面引用 manifest
在用戶打開頁面之前，需要有一個頁面來實現(xiàn)緩存機制
如果這樣，那么為何不試一下 iframe 來引入一個擁有 manifest 的靜態(tài)文件?但用 iframe 還能會緩存到文件?經(jīng)過一翻測試，Google Chrome 的調(diào)試工具給了答案：
太給力啦!!竟然成功緩存。做法是這樣的，新建一個 cache.html 文件來當(dāng)做為當(dāng)前頁面的代理，內(nèi)容如下：
<!DOCTYPE html>
<html manifest="http://www.sofish.de/sofished.manifest">
<head>
<meta charset=utf-8 />
<title>cache</title>
</head>
<body>
hi sofish!
</body>
</html>
然后，在每個頁面通過 iframe 來引用這個靜態(tài)文件，以達(dá)到我們不緩存當(dāng)面頁面，只緩存我們希望緩存文件的目的。
(二)關(guān)于 Firefox 彈出警告問題
這個，瀏覽器默認(rèn)的，瀏覽器廠商的目的是為用戶的安全著想，我們暫時也改變不了。其實，也不會有太大的影響，我也沒有好好去想。
五、總結(jié)
測試下來，其實跟緩存當(dāng)前頁面還是有差別的，畢竟像站外的鏈接，特別是 gravatar 總要請求這么多圖片，這點就又多了一點時間了。這現(xiàn)象主要出現(xiàn)在 Firefox 下，而 Webkit 而表示非常棒，速度幾乎和緩存當(dāng)前面一樣，第二次打開的頁面，都是瞬間響應(yīng)的， 這點不得不贊啊。
對于實踐的 Demo，本來可以提供一份，不過，瞄了一下，突然發(fā)現(xiàn)自己寫得太專心了，已凌晨 2：49 了，明天還要上班。所以，打開你的調(diào)試工具，把本博當(dāng) Demo 看吧，這是最直接的應(yīng)用了。
好吧，大概就這樣，能為用戶省多少就是多少，這是一個前端希望做到的，也是能做到的。這也算是有了 fallback 方案。期待你，看到最后的你，還有更好的方法。也期待 HTML5 的發(fā)展，期待這些給力的新技術(shù)。
