html5 Application Cache——加快簡歷二次訪問速度

時間 2019-11-19

標籤 html5 html application cache 加快簡歷二次訪問速度欄目 HTML5 简体版

原文原文鏈接

上篇博客（在github上寫我的簡歷——最簡單卻又不容易的內容羅列）介紹了我在github上放的一個我的在線簡歷，有朋友看了後告訴我一個很大缺陷，使用github挺慢的，每次看的時候都很慢，第一反應這問題我可解決不了，後來想到是否能夠利用緩存，至少第二次看的時候會快一些，但緩存機制大部分依賴於瀏覽器，並且默認都用了，仍是很慢，因此此路不通。css

application cache

突然靈光一現（原諒我愚笨，其實應該很快想到的），前段日子在看html5的東西，當時以爲application cache沒有太大用處，又膚淺了，用在這個需求實在太合適了。那麼是什麼是application cache呢？html

application cache是html5引入的本地存儲方案之一，和咱們日常瀏覽器緩存相似，application cache在本地存儲頁面資源，咱們先不用着急看application具體怎麼使用，首先看看傳統瀏覽器緩存有哪些問題。html5

一：瀏覽器緩存是不可靠的，咱們不直到當前哪些資源被緩存，也不知道會被緩存多久，由於瀏覽器會隨時由於空間或時間緣由捨棄某些緩存，加入新的緩存文件。jquery

二：雖然有瀏覽器緩存，但咱們不能依賴瀏覽器緩存徹底離線訪問webgit

application cache解決了這兩個主要問題，application cache容許開發者指定頁面哪些資源須要被緩存，雖然也有空間大小限制，可是能夠經過程序更改，能夠控制緩存生命週期，安全可靠的讓web離線使用，這麼神奇，看看是怎麼作到的吧github

manifest 文件

要向使用application cache 須要爲頁面的html標籤添加manifest屬性，屬性值是manifest文件路徑，可使用同源的絕對地址，也可使用相對地址。web

<!doctype html>
<html lang="zh" manifest="main.manifest">
</html>

application cache是經過mannifest文件來管理的，manifest文件是簡單的文本文件，內容是須要被緩存供離線使用的文件列表，及不須要被緩存或讀取緩存失敗的文件控制。mannifest文件可使用任意拓展名，但須要在服務器中添加MIME類型匹配，使用apache比較簡單，若是使用.manifest做爲拓展名在apache配置文件中添加apache

AddType text/cache-manifest .appcache

使用IIS的話經過界面找到添加MIME窗口添加便可瀏覽器

如何配置

下面是一個manifest文件的示例緩存

main.manifest

 1 CACHE MANIFEST
 2 #version 0.2.0
 3 #date: Nov 24 2013
 4 
 5 CACHE:
 6 css/reset.css
 7 css/main.css
 8 js/jquery.js
 9 images/bg.png
10 images/bg_hl.jpg
11 images/icons/yes.png
12 images/icons/top.png
13 offline.html
14 
15 NETWORK:
16 *
17 
18 FALLBACK:
19 index.html offline.html

1. 文件的第一行必須是 CACHE MANIFEST

2. ＃開頭的行做爲註釋語句，因此文件中關於版本和日期都是註釋，爲了方便維護

3. 網站的緩存不能超過5M

4. 文件資源路徑可使用絕對路徑也可使用相對路徑

5. 文件列表中任意一個緩存失敗都會致使整個緩存失效，瀏覽器hui按沒有application cache處理

6. 既能夠站點使用同一個minifest文件，也能夠每一個頁面使用一個

而後看一下CACHE、NETWORK、和FALLBACK三條指令語句

CACHE：指明須要緩存的資源文件,瀏覽器會自動緩存帶有manifest屬性的html頁面，因此yinyongwmanifest文件的頁面不用寫在裏面

NETWORK：不須要緩存的文件，名字就叫網絡工做嘛，可使用通配符

FALLBACK：沒法訪問緩存文件的備選文件，也可使用通配符，上邊例子的配置，讀取不到index.html的話就會跳轉至offline.html

看看效果

在在線簡歷中使用application cache後，訪問一下

能夠在控制檯看看application cache，果然咱們但願緩存的內容都被緩存了，試試離線好很差使，因爲不知道github是否是支持及其定義的manifest文件拓展名是什麼，只好在本身本地試試了，在電腦上配置好，用手機訪問，而後斷開手機網絡，刷新一下。

刷新了八下依舊好使哎，手機離線也能看，就不截圖了。當清除掉application cache而且關掉網絡的時候，頁面果然到了offline.html

更新

這樣不依賴與瀏覽器的緩存機制也有個問題，怎麼更新文件告知客戶端呢，總不能永遠使用一份緩存啊。簡單的方法咱們能夠更新manifest文件，修改註釋的版本號或者日期就能夠，這樣瀏覽器就會從新緩存文件，值得注意的是須要minifest文件自己更改（註釋均可以），而緩存文件清單中的文件自己好比offline.html更新瀏覽器是不會從新緩存的。

這樣咱們修改了服務器的manifest文件後用戶多刷幾遍頁面就能夠了，但未免低級了一些，咱們能夠經過application cache 提供的接口來檢查更新

application cache 在window上註冊了一個applicationCache對象

status屬性標明當前application cache狀態

0:UNCACHED（未緩存）

1:IDEL（空閒的）

2:CHECKING（正在檢查）

3:DOWNLOADING（正在下載）

4:UPDATEREADY（準備更新）

5:OBSOLETE (已過期)

另外對象有幾個事件，看名字就能知道時作什麼的。

對象有三個重要方法

update:嘗試檢查下載新application cache，固然得服務器更新了manifest文件纔會下載

swapCache:當status變爲UPDATEREADY時就能夠更新本地application cache了

abort:取消正在進行的application cache更新

即便下載完新的緩存，也不意味這頁面會更新，咱們須要從新加載一次頁面，能夠經過這樣的方式來使頁面第一時間更新緩存

applicationCache.onupdateready=function(e) {
      applicationCache.swapCache();
      if (confirm('頁面已更新，是否加載新內容?')) {
        window.location.reload();
      }
    };

固然也能夠設個輪詢函數定時調用update方法檢查更新，這裏不演示了