H5 快取機制淺析 移動端 Web 載入效能優化
1 H5 快取機制介紹
H5，即 HTML5，是新一代的 HTML 標準，加入很多新的特性。離線儲存（也可稱為快取機制）是其中一個非常重要的特性。H5 引入的離線儲存，這意味著 web 應用可進行快取，並可在沒有因特網連線時進行訪問。
H5 應用程式快取為應用帶來三個優勢：
-
離線瀏覽 使用者可在應用離線時使用它們
-
速度 已快取資源載入得更快
-
減少伺服器負載 瀏覽器將只從伺服器下載更新過或更改過的資源。
根據標準，到目前為止，H5 一共有6種快取機制，有些是之前已有，有些是 H5 才新加入的。
-
瀏覽器快取機制
-
Dom Storgage（Web Storage）儲存機制
-
Web SQL Database 儲存機制
-
Application Cache（AppCache）機制
-
Indexed Database （IndexedDB）
-
File System API
下面我們首先分析各種快取機制的原理、用法及特點；然後針對 Anroid 移動端 Web 效能載入優化的需求，看如果利用適當快取機制來提高 Web 的載入效能。
2 H5 快取機制原理分析
2.1 瀏覽器快取機制
瀏覽器快取機制是指通過 HTTP 協議頭裡的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等欄位來控制檔案快取的機制。這應該是 WEB 中最早的快取機制了，是在 HTTP 協議中實現的，有點不同於 Dom Storage、AppCache 等快取機制，但本質上是一樣的。可以理解為，一個是協議層實現的，一個是應用層實現的。
Cache-Control 用於控制檔案在本地快取有效時長。最常見的，比如伺服器回包：Cache-Control:max-age=600 表示檔案在本地應該快取，且有效時長是600秒（從發出請求算起）。在接下來600秒內，如果有請求這個資源，瀏覽器不會發出 HTTP 請求，而是直接使用本地快取的檔案。
Last-Modified 是標識檔案在伺服器上的最新更新時間。下次請求時，如果檔案快取過期，瀏覽器通過 If-Modified-Since 欄位帶上這個時間，傳送給伺服器，由伺服器比較時間戳來判斷檔案是否有修改。如果沒有修改，伺服器返回304告訴瀏覽器繼續使用快取；如果有修改，則返回200，同時返回最新的檔案。
Cache-Control 通常與 Last-Modified 一起使用。一個用於控制快取有效時間，一個在快取失效後，向服務查詢是否有更新。
Cache-Control 還有一個同功能的欄位：Expires。Expires 的值一個絕對的時間點，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在這個時間點之前，快取都是有效的。
Expires 是 HTTP1.0 標準中的欄位，Cache-Control 是 HTTP1.1 標準中新加的欄位，功能一樣，都是控制快取的有效時間。當這兩個欄位同時出現時，Cache-Control 是高優化級的。
Etag 也是和 Last-Modified 一樣，對檔案進行標識的欄位。不同的是，Etag 的取值是一個對檔案進行標識的特徵字串。在向伺服器查詢檔案是否有更新時，瀏覽器通過 If-None-Match 欄位把特徵字串傳送給伺服器，由伺服器和檔案最新特徵字串進行匹配，來判斷檔案是否有更新。沒有更新回包304，有更新回包200。Etag 和 Last-Modified 可根據需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認為檔案沒有更新。
另外有兩種特殊的情況：
-
手動重新整理頁面（F5)，瀏覽器會直接認為快取已經過期（可能快取還沒有過期），在請求中加上欄位：Cache-Control:max-age=0，發包向伺服器查詢是否有檔案是否有更新。
-
強制重新整理頁面（Ctrl+F5)，瀏覽器會直接忽略本地的快取（有快取也會認為本地沒有快取），在請求中加上欄位：Cache-Control:no-cache（或 Pragma:no-cache），發包向服務重新拉取檔案。
下面是通過 Google Chrome 瀏覽器（用其他瀏覽器+抓包工具也可以）自帶的開發者工具，對一個資原始檔不同情況請求與回包的截圖。
首次請求：200
快取有效期內請求：200(from cache)
快取過期後請求：304（Not Modified)
一般瀏覽器會將快取記錄及快取檔案存在本地 Cache 資料夾中。Android 下 App 如果使用 Webview，快取的檔案記錄及檔案內容會存在當前 app 的 data 目錄中。
分析：Cache-Control 和 Last-Modified 一般用在 Web 的靜態資原始檔上，如 JS、CSS 和一些影象檔案。通過設定資原始檔快取屬性，對提高資原始檔載入速度，節省流量很有意義，特別是行動網路環境。但問題是：快取有效時長該如何設定？如果設定太短，就起不到快取的使用；如果設定的太長，在資原始檔有更新時，瀏覽器如果有快取，則不能及時取到最新的檔案。
Last-Modified 需要向伺服器發起查詢請求，才能知道資原始檔有沒有更新。雖然伺服器可能返回304告訴沒有更新，但也還有一個請求的過程。對於行動網路，這個請求可能是比較耗時的。有一種說法叫“消滅304”，指的就是優化掉304的請求。
抓包發現，帶 if-Modified-Since 欄位的請求，如果伺服器回包304，回包帶有 Cache-Control:max-age 或 Expires 欄位，檔案的快取有效時間會更新，就是檔案的快取會重新有效。304回包後如果再請求，則又直接使用快取檔案了，不再向伺服器查詢檔案是否更新了，除非新的快取時間再次過期。
另外，Cache-Control 與 Last-Modified 是瀏覽器核心的機制，一般都是標準的實現，不能更改或設定。以 QQ 瀏覽器的 X5為例，Cache-Control 與 Last-Modified 快取不能禁用。快取容量是12MB，不分HOST，過期的快取會最先被清除。如果都沒過期，應該優先清最早的快取或最快到期的或檔案大小最大的；過期快取也有可能還是有效的，清除快取會導致資原始檔的重新拉取。
還有，瀏覽器，如 X5，在使用快取檔案時，是沒有對快取檔案內容進行校驗的，這樣快取檔案內容被修改的可能。
分析發現，瀏覽器的快取機制還不是非常完美的快取機制。完美的快取機制應該是這樣的：
-
快取檔案沒更新，儘可能使用快取，不用和伺服器互動；
-
快取檔案有更新時，第一時間能使用到新的檔案；
-
快取的檔案要保持完整性，不使用被修改過的快取檔案；
-
快取的容量大小要能設定或控制，快取檔案不能因為儲存空間限制或過期被清除。
以X5為例，第1、2條不能同時滿足，第3、4條都不能滿足。
在實際應用中，為了解決 Cache-Control 快取時長不好設定的問題，以及為了”消滅304“，Web前端採用的方式是：
-
在要快取的資原始檔名中加上版本號或檔案 MD5值字串，如 common.d5d02a02.js，common.v1.js，同時設定 Cache-Control:max-age=31536000，也就是一年。在一年時間內，資原始檔如果本地有快取，就會使用快取；也就不會有304的回包。
-
如果資原始檔有修改，則更新檔案內容，同時修改資原始檔名，如 common.v2.js，html頁面也會引用新的資原始檔名。
通過這種方式，實現了：快取檔案沒有更新，則使用快取；快取檔案有更新，則第一時間使用最新檔案的目的。即上面說的第1、2條。第3、4條由於瀏覽器內部機制，目前還無法滿足。
2.2 Dom Storage 儲存機制
DOM 儲存是一套在 Web Applications 1.0 規範中首次引入的與儲存相關的特性的總稱，現在已經分離出來，單獨發展成為獨立的 W3C Web 儲存規範。 DOM 儲存被設計為用來提供一個更大儲存量、更安全、更便捷的儲存方法，從而可以代替掉將一些不需要讓伺服器知道的資訊儲存到 cookies 裡的這種傳統方法。
上面一段是對 Dom Storage 儲存機制的官方表述。看起來，Dom Storage 機制類似 Cookies，但有一些優勢。
Dom Storage 是通過儲存字串的 Key/Value 對來提供的，並提供 5MB （不同瀏覽器可能不同，分 HOST)的儲存空間（Cookies 才 4KB)。另外 Dom Storage 儲存的資料在本地，不像 Cookies，每次請求一次頁面，Cookies 都會發送給伺服器。
DOM Storage 分為 sessionStorage 和 localStorage。localStorage 物件和 sessionStorage 物件使用方法基本相同，它們的區別在於作用的範圍不同。sessionStorage 用來儲存與頁面相關的資料，它在頁面關閉後無法使用。而 localStorage 則持久存在，在頁面關閉後也可以使用。
Dom Storage 提供了以下的儲存介面：
| 1 2 3 4 5 6 7 8 |
interface Storage {
readonly attribute unsigned long length;
[IndexGetter] DOMString key(in unsigned long index);
[NameGetter] DOMString getItem(in DOMString key);
[NameSetter] void setItem(in DOMString key, in DOMString data);
[NameDeleter] void removeItem(in DOMString key);
void clear();
};
|
sessionStorage 是個全域性物件，它維護著在頁面會話(page session)期間有效的儲存空間。只要瀏覽器開著，頁面會話週期就會一直持續。當頁面重新載入(reload)或者被恢復(restores)時，頁面會話也是一直存在的。每在新標籤或者新視窗中開啟一個新頁面，都會初始化一個新的會話。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 當頁面重新整理時，從sessionStorage恢復之前輸入的內容
window.onload =
|