HTML5緩衝Cache Manifest執行個體講解

來源:互聯網
上載者:User

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 而表示非常棒,速度幾乎和緩衝當前面一樣,第二次開啟的頁面,都是瞬間響應的,效果非常不錯。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。