Cache Manifest是HTML5的一種緩衝機制，文章作者直接用部落格當測試環境，雖然應用起來非常簡單，但效果卻出奇的好。緩衝後的速度，簡直是驚人的快。像Yslow顯示，開啟一個緩衝過的頁面，只要0.729秒，比不緩衝的差不多快了10倍。
一、Cache Manifest基礎知識
作為一個Web開發相關的人員，都不會少聽到、看到Cache這個詞。是的，上面也已經說了，它是一種緩衝的機制。它可以通過一個.manifest檔案來配置需要緩衝的或者一定要保持連網緩衝的檔案。而重點就是這個.manifest檔案，這裡進行了簡單的整理：
◆MIME TYPE：text/cache-manifest
◆需要由你建立的：NAME.manifest
◆作用：主要是配置需要緩衝的檔案
二、如何?
實現起來倒是非常簡單（當然，這也是有問題的，這個我們後面講解決方案），實現步驟如下：
1.在伺服器上添加MIME TYPE支
比如 Apache 中可在 .htaccess 中添加：
以下是引用片段：
AddType text/cache-manifest manifest
2.建立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.給<html>標籤加manifest屬性
以下是引用片段：
<html manifest="path/to/NAME.manifest">
是的，就是如此簡單，相信你花上30分鐘也就瞭解了，而且能夠快速的應用到工作中。
三、Cache Manifest 存在的問題
經過上面一整，速度明顯快了許多，幫忙測試的人也小震驚了一下，只是，還是存在一些問題，看一下，然後我們嘗試解決：
1.自動緩衝引用了manifest檔案的頁面
即使在NETWORK 中指定 "*"（所有的頁面都）使用網路，還是不能解決它自動緩衝當前頁面。這使得這個頁面在 manifest 沒有變更的情況下，會一直以"類靜態"存在。比如，你後台更新了一篇文章，這個動態首頁，還是像第一次緩衝的時候一樣，沒有變。這對於靜態頁面還好，但應用在一個動態系統就很麻煩了，因為你的內容是時時要更新的。
2.Firefox彈出提示資訊
可能是習慣了彈窗警告之類的，一不小心，使用者還以為是網站被人＊＊呢，想把不乾淨的東西儲存到他的電腦。
四、解決方案
（一）關於自動緩衝當前頁面
在《Pro HTML5 Programming》有這樣一句話：這並不是Bug，而是機制的需要。雖然說這樣會讓頁面載入更快，但對於動態網頁面來說就是噁心了。至少應該有一種讓使用者選擇是否緩衝當前頁的配置方案（或者說是一個開關）。不過，這是暫時不能解決的，畢竟這還只是一個Draft，我們要用，就應該找一個合適的方案。
我的想法是，看看大家有沒有更好的辦法。結果，查了一下，無果。新的東西，幾乎所有文章說的都只是我上面說的那個如何去寫一個manifest檔案，看來還是沒辦法偷懶。然後，便開始想：
◆一定不要緩衝動態頁面，當前頁一定不能引用manifest檔案。
◆能不能從其他頁面先載入緩衝？
那麼，如果有解決方案的話，解決方案應該是：
◆不在當前頁面引用manifest。
◆在使用者開啟頁面之前，需要有一個頁面來實現緩衝機制。
如果這樣，那麼為何不試一下iframe來引入一個擁有manifest的靜態檔案？但用 iframe 還能會緩衝到檔案？經過一翻測試，Google Chrome的調試工具給了答案：結果很不錯，成功緩衝。做法是這樣的，建立一個cache.html檔案來當做為當前頁面的代理，內容如下：
以下是引用片段：
<!DOCTYPE html>
<html manifest="http://www.happinesz.cn/sofished.manifest"> <head>
<meta charset=utf-8 />
<title>cache</title>
</head>
<body> hi sofish!
</body>
</html>
然後，在每個頁面通過iframe來引用這個靜態檔案，以達到我們不緩衝當面頁面，只緩衝我們希望快取檔案的目的。
（二）關於Firefox 彈出警告問題
這個，瀏覽器預設的，瀏覽器廠商的目的是為使用者的安全著想，我們暫時也改變不了。其實，也不會有太大的影響，我也沒有好好去想。
五、總結
測試下來，其實跟緩衝當前頁面還是有差別的，畢竟像站外的連結，特別是gravatar總要請求這麼多圖片，這點就又多了一點時間了。這現象主要出現在 Firefox 下，而 Webkit 而表示非常棒，速度幾乎和緩衝當前面一樣，第二次開啟的頁面，都是瞬間響應的，效果非常不錯。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
