HTML5 AppCache機制分析

2021-06-22 11:48:20 字數 1410 閱讀 9676

應用程式快取為應用帶來三個優勢:

下面我們來看個例子:

資料夾下有4個檔案,

檔案內容如下:

index.html

index.css

output
index.js

setinterval(function () , 1000);
再次重新整理頁面也會更新這些檔案(當檔案內容並無實際更新是也會發起http請求, http返回304, 但也會發起http請求)

觀察htto request header可以看到pragma設定了no-cache

同時修改index.html, 新增

再次請求index.html, 

重新整理頁面會發現只請求了乙個檔案:

這時修改index.html檔案再次請求並不會更新index.html檔案, 說明index.html已經快取,並不會從server端獲取。

一旦應用被快取,它就會保持快取直到發生下列情況:

manifest 檔案是簡單的文字檔案,它告知瀏覽器被快取的內容(以及不快取的內容)。

manifest 檔案可分為三個部分:

network - 在此標題下列出的檔案需要與伺服器的連線,且不會被快取

fallback - 在此標題下列出的檔案規定當頁面無法訪問時的回退頁面(比如 404 頁面)

info.html  404.html
比如針對hybrid方案,可改進點:

1、 對manifest檔案更新,會重新請求所有檔案,實際上可能只更新了很少量檔案。( 雖然重新請求資源會返回304, 但每個檔案還會發起請求)

針對此點可以只更新需要更新的檔案, 比如可以建立乙個檔案版本或者md5對映,對相同版本或者md5不再請求

2.  manifest檔案每次都會請求,我們可以按照一定時間更新一次,或者啟動時更新一次,以減少manifest檔案更新次數

HTML5應用快取機制

用360瀏覽器的使用者對這張圖應該都是耳熟能詳了吧,沒錯,當網路不通暢時使用360瀏覽器,便會有這張圖彈出來。為什麼沒有網路還能彈出這一副畫面呢?這就關乎html5的應用快取機制了。那什麼是應用快取機制呢?怎麼使用應用快取?首先,我們需要新建乙個自定義的清單檔案 manifest file 在這裡我...

html5介紹,什麼是html5,html5新特性

html5 將成為 html xhtml 以及 html dom 的新標準。html 的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。html5 是 w3c 與 whatwg 合作的結果。編...

Html5頁面返回機制解決方案

需要處理的返回場景 1.正常的a b c 2.頁面上的按鈕觸發需要登陸 3.頁面跳轉需要登陸 4.頁面上的可修改的部分 如選擇位址,位址頁面本身也是可以增刪改查的 整體的原則是原路來原路回 第乙個場景不需要考慮,history.go 1 就ok,第二個場景登陸成功之後使用history.go 1 第...