Html5 快取策略簡介

2021-06-29 16:10:50 字數 1058 閱讀 9227

html5不管在有沒有網路的情況下,都會載入本地快取。

怎麼使用html5的離線儲存?

首先,你得告訴瀏覽器你想要離線儲存哪些檔案,那就需要有乙個快取檔案清單,這跟檔案是乙個manifest字尾名的檔案,注意,使用html5的離線儲存就必須有這個檔案,而且必須在伺服器端做修改,使得.manifest字尾名的檔案的mime型別為text/cache-manifest。典型的乙個檔案清單類似下面這個,一定是以cache manifest開頭的:

cache:指定你要瀏覽器進行離線儲存的檔案列表,乙個檔案一行

network:跟cache相反,指定瀏覽器一定要通過網路訪問的檔案列表

fallback:如果通過網路訪問失敗了,就去訪問緊跟著的那個在本地快取好的檔案檔案

指定上述檔案,可以用相對路徑,也可以用絕對路徑,都是ok的。但是絕對路徑要加上http://

編輯好這個檔案以後就在html檔案中引入這個檔案瀏覽器就可以知道要快取那些檔案了。

html5的快取更新策略:

html5中對應的離線儲存api:

第一次訪問指定了manifest的頁面:

重新整理頁面:

有一種情況是沒有指定manifest屬性也會觸發checking事件,那就是當當前訪問頁面是從離線儲存中載入進來,如下圖:

另一方面,如果你之前訪問過此頁面或者其他頁面指向了相同的快取名單,那麼你的瀏覽器已經知道這個快取名單。可能已經有一些資源在應用程式快取中。可能全部工作的網路應用程式已在應用程式快取中。現在的問題是,你的瀏覽器上次檢測之後,快取名單是否已經更改?

o 如果答案是沒有,快取名單沒有更改,你的瀏覽器將會立即觸發乙個noupdate事件。就這樣,你完工了。

更改manifest檔案以後:

在manifest檔案中的cache下增加乙個不存在的檔案後:



HTML5 應用快取

html5 引入了應用程式快取,這意味著 web 應用可進行快取,並可在沒有網際網路連線時進行訪問。應用程式快取為應用帶來三個優勢 新增快取 manifest 檔案可分為三個部分 network 在此標題下列出的檔案需要與伺服器的連線,且不會被快取 fallback 在此標題下列出的檔案規定當頁面無...

HTML5離線快取

它的優勢在於 ie10以下不支援,其餘的瀏覽器都支援。補充瀏覽器及其核心 ie trident ff gecko chrome blink opera blink 曾經使用presto safari webkit timepara getdatetime 獲取日期和時間 logo.png width...

html5 離線快取

本文將介紹離線快取的方方面面,並在最後會介紹一下關於自動化的問題。html5之前的網頁,都是無連線,必須聯網才能訪問,這其實也是web的特色,這其實對於pc是時代問題並不大,但到了移動網際網路時代,裝置終端位置不再固定,依賴無線訊號,網路的可靠性變得降低,比如坐在火車上,過了乙個隧道 15分鐘 便無...