整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、什么是應用程序緩存:
HTML5引入了應用程序緩存，這意味著web應用可進行緩存，并可在沒有因特網
連接時進行訪問
2、應用緩存的優勢:
1): 離線瀏覽-用戶可在應用離線時使用它們
2):速度-已緩存資源加載得更快
3):減少服務器負載-瀏覽器將只從服務器下載更新過或更改過的資源
3、實現緩存:
如需啟用應用程序緩存，請在文檔的<html>標簽中包含manifest屬性
manifest文件的建議的文件擴展名是:’.appcache'"
4、Manifest 文件:
1): CACHE MANIFEST-在此標題下列出的文件將在首次下載后進行緩存
2): NETWORK -在此標題下列出的文件需要與服務器的連接， 且不會被緩存
3): FALLBACK -在此標題下列出的文件規定當頁面無法訪問時的回退頁面(比如
404頁面)
具體使用：1、在html頁面的html標簽里面添加.appcache 的文件
2、創建對應的.appcache文件
3、在緩存文件里面寫上 CACHE MANIFEST 注意是大寫哦
接著寫上CACHE:../db.html
db.js
db.html頁面里面：<html manifest="js/db.appcache">db.appcache文件創建在js文件夾里面，創建的時候，選擇創建文件即可
頁面加上緩存后，本地打開服務器html5頁面速度會變快，或者服務器沒有連接上，本地也可以顯示頁面數據
SDN移動將持續為您優選移動開發的精華內容，共同探討移動開發的技術熱點話題，涵蓋移動應用、開發工具、移動游戲及引擎、智能硬件、物聯網等方方面面。如果您想投稿、尋求《近匠》報道，或給文章挑錯，歡迎發送郵件至tangxy#csdn.net（請把#改成@）。
HTML5是新一代的HTML標準，加入很多新的特性。離線存儲（也可稱為緩存機制）是其中一個非常重要的特性。HTML5引入的離線存儲，這意味著Web應用可進行緩存，并可在沒有因特網連接時進行訪問。
HTML5應用程序緩存為應用帶來三個優勢：
根據標準，到目前為止，HTML5一共有6種緩存機制，有些是之前已有，有些是HTML5才新加入的。
下面我們首先分析各種緩存機制的原理、用法及特點；然后針對Android移動端Web性能加載優化的需求，看如何適當利用緩存機制來提高Web的加載性能。
瀏覽器緩存機制是指通過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可根據需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認為文件沒有更新。
另外有兩種特殊的情況：
下面是通過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，在使用緩存文件時，是沒有對緩存文件內容進行校驗的，這樣緩存文件內容被修改的可能。
分析發現，瀏覽器的緩存機制還不是非常完美的緩存機制。完美的緩存機制應該是這樣的：
在實際應用中，為了解決Cache-Control緩存時長不好設置的問題，以及為了“消滅304”，Web前端采用的方式是：
通過這種方式，實現了：緩存文件沒有更新，則使用緩存；緩存文件有更新，則第一時間使用最新文件的目的。即上面說的第1、2條。第3、4條由于瀏覽器內部機制，目前還無法滿足。
、HTML5離線緩存技術
支持離線緩存是HTML5中的一個重點，離線緩存就是讓用戶即使在斷網的情況下依然可以正常的運行應用。傳統的本地存儲數據的方式有 localstorage,sessionstorage和cookie。但是這些傳統的方式有著致命的弊端。首先這些傳統的存儲方式的最大使用空間有 限，最多不超過5M;其次它們處理大規模的結構化數據的能力有限。鑒于傳統方式的局限性，HTML5提出了三種新的離線緩存解決方案：Web SQL,indexedDB和File System。
其中Web SQL已經不包含在HMLT5規范中，成了一個獨立的規范，Web SQL使用的SQL是SQLite。由于無法統一各個瀏覽器廠商實現的SQL語言,故Web SQL已經被廢棄，由indexedDB取代，但是目前很多瀏覽器支持Web SQL，而且相對于indexedDB和 File System來說，Web SQL的效率最高，訪問速度最快，穩定性也最好。
indexedDB也支持本地存儲大量對象，并使用健壯的數據訪問機制檢索數據。但是目前支持Indexedb的瀏覽器很少，而且規范還在持續更新中，暫時還沒有形成一個統一的標準。
在離線環境中，WebDataBase 雖然能夠存儲并有效地管理和維護客戶端的數據集合，但是仍不能滿足對包含大段數據文件的存儲和多種不同格式 文件的保存，于是我們就需要離線的文件管理系統來維護我們工作了，基于HTML5的File System API 就充當這這個角色。File System非常適合大量的存儲媒體文件。對于手機端而言，不同的瀏覽器的實現有所不同，有的瀏覽器是將文件寫入到ROM中，如QQ手機瀏覽器，有的瀏覽 器是將文件寫到SD卡中，如百度瀏覽器。所以理論上File System可用的空間非常大。
二、手機瀏覽器支持離線緩存的情況
測試采用的寫數據的方式是key-value對，其中value的值150k左右。
由于Web SQL,indexedDB和File System的可用空間容量與手機Temporary storage有關，故測試數據與手機機型和瀏覽器本身的狀態有關，故上述數據僅供參考。測試的過程中還發現有些瀏覽器HTML5跑分，分數雖然拿到了， 但是實際并沒有完全實現相關標準。
測試結果顯示，手機瀏覽器對Web SQL,indexedDB和File System支持情況參差不齊，除了chrome支持所有的三種標準之外，其它的手機瀏覽器支持都不全，對于開發者來說，如果想要用到這些技術，必須先探 測瀏覽器是否支持該標準，只有支持了才可以使用相關的API。為了使開發者透明地使用底層的離線緩存空間，使用者不用自己去測探瀏覽器究竟支持哪種或者哪 幾種標準，現在作者開發了一個HTML5離線緩存管理庫，用戶便可以像調用localstorage一樣調用相關的接口即可獲取數據，為開發者提供最大的 便利。
三、HTML5離線緩存管理庫的設計
1、接口設計
在web前端開發的過程中，開發者localstorage的接口使用相對熟悉，故HTML5離線緩存管理庫采用類localstorage的接口，異步的調用方式。
設置（key，value）值對
cache.setItem(key, value, suc, err)
key: string類型
value: string類型
suc：設置成功的回調函數
err：設置失敗的回調函數
獲取鍵值為key的值
cache.getItem(key, suc, err)
key: string類型
suc：獲取成功的回調函數
err：獲取失敗的回調函數
刪除鍵值為key的項
cache.removeItem(key, suc, err)
key: string類型
suc：刪除成功的回調函數
err：刪除失敗的回調函數
清除所有記錄
cache.clear(suc, err)
suc：清除所有記錄成功的回調函數
err：清除所有記錄失敗的回調函數
2、總體設計
HTML5離線緩存管理庫采用的優先適配的策略，優先級為Web SQL > File System> indexedDB >localstorage。即js會自動對瀏覽器就行檢測，如果發現支持web SQL，則使用web SQL，如果不支持，則接著檢測File System，如果支持則會使用File System，以此類推。
至于為什么將優先級設置為：web SQL > File System> indexedDB >localstorage，主要是基于以下幾方面做考慮：
雖然Web SQL是個逐漸廢棄的標準，但是目前是瀏覽支持得最為廣泛的技術，而且效率最高，速度最快，穩定性最好，故將其作為首選。
本庫對外提供的接口是key-value對的形式，而File System是以文件的形式存在的，為了達到接口的要求需要封裝和解析，導致效率下降，故將它的優先級位于web SQL之后，但是它可供使用空間的大小最大，所有將它放在indexedDB之前。
indexedDB將取代Web SQL，但是indexedDB的規范在持續更新中，目前并沒有完全形成一個最終的標準，這體現在一些接口的更迭（本緩存庫有做兼容），而且支持 indexedDB的瀏覽器很少，且支持情況不是很好，故將其僅放在localstorage之前。
localstorage存儲空間最小，支持最為廣泛，故作為一個最保險的后備方案。
為了保證對外提供的是統一的接口，接口傳入的數據格式是key-value對的形式，但是由于File System本身是以文件的方式存儲數據，所以不太適合處理key-value這類數據。
本庫采用的數據存儲方式是將key-value保存為JSON格式，通過JSON.stringify將其轉化為字符串，并保存到文件中，讀取的時候，通過JSON.parse將文件中數據解析為JSON格式。
為了提高File System的存取效率，采用了兩種優化策略。首先將數據存于多個文件之中，根據key建立hash映射，每次讀取數據，直接從相應的文件中取，這種方式 相對于存到一個文件的方式優點是，文件小，故每次讀取的數據量小；其次采取緩存的策略，初始化的時候，將文件讀取到內存之中，之后每次讀取數據的時候直接 從內存中取數據即可，這樣相比于每次直接從文件中讀取數據，效率得到了極大的提升，當更改數據的時候會將緩存中的數據flush到文件中。
3、兼容性問題
由于HTML5相關標準在持續更新中，API隨著標準的跟進，也有所變化，如下是一些比較大的改變。
File System
BlobBuilder構造函數被啟用，應該使用Blob構造函數，例如：
舊的調用方式：
var bb = new BlobBuilder();
bb.append(JSON.stringify(t.cache[name]));
write.write(bb.getBlob(‘text/plain‘));
新的調用方式：
var bb = new Blob([JSON.stringify(t.cache[name])], {type: "text/plain"});
write.write(bb);
Web SQL
setVersion()方法被廢棄，這導致我們在創建數據庫和createObjectStore的流程有一些變動，而且多了一些新的回調方法。
//注意區別以前的方法，這里第二個參數不再是description，而是數據庫版本號
var request = indexedDB.open(‘mydb‘,1);
request.onsuccess = function(e) { //數據庫打開成功回調
DB.db = e.target.result; //我們用DB.db來存放indexdb
callback();
};
//第一次打開數據庫或數據庫升級時會觸發，完成后根據情況觸發success或者error
request.onupgradeneeded = function(e){
DB.db = e.target.result;
var db = DB.db;
//createObjectStore,以前需要在setVersion時才能執行。
if(!DB.db.objectStoreNames.contains(‘notes‘)){
// create object store
var store = db.createObjectStore(‘notes‘, {keyPath:‘id‘, autoIncrement:true})
store.createIndex(‘updated‘, ‘updated‘, { unique: false });
}
};
request.onerror = function(e){ //數據庫打開錯誤回調
console.log(e);
}
四、測試
1.測試說明
使用HTML5離線緩存庫的測試頁面如下：
使用方法：
1.測試setItem
主要測試setItem接口，設置key-value。
2.測試getItem
主要測試getItem接口，根據用戶輸入的key，點擊“確定”，查詢對應的記錄，如果查詢不到對應的記錄，value框為空；如果查詢到對應的記錄，value框中顯示查詢的結果。
3.測試removeItem
主要測試removeItem接口，用戶輸入key，點擊“確定”后刪除key對應的記錄。
4.測試clear
主要測試clear接口，點擊“確定”，刪除所有的記錄。
5.自動測試
連續寫入key-value數據，其中key為“1”，“2”，“3”遞增，value為160.6k的固定字符串。點擊“開始”，連續寫入該 key-value數據，直到點擊“結束”或者離線緩存寫滿為止；點擊“結束”，停止自動寫數據。如果重復“開始”操作，需要刷新頁面。
2.測試結果
使用HTML5離線緩存管理庫對部分手機瀏覽器的測試結果如下：
3.源文件
HTML5離線緩存管理庫的測試鏈接：
http://3gimg.qq.com/cube/cache/index-1.0.html
五、同步插件
1.使用說明
鑒于前端開發者比較習慣使用同步API，而Web SQL,indexedDB和File System都提供異步API，為了方便開發者，筆者為“HTML5 離線緩存管理庫”提供了一個同步插件，方便開發者同步調用相關API，供參考。
“HTML5 離線緩存管理庫”的同步插件使用說明：
優點：
(1) 方便開發者使用“HTML5 離線緩存管理庫”進行同步操作，開發者可以像調用localstorage的方式同步調用相關接口。
(2) 調用者只需初始化一次，在初始化成功后便可進行余下操作。
(3) 由于開發者調用的接口其實都是從內存中取得數據，故速度比較快，flush等操作讓后臺處理。
缺點：
(1) 離線緩存方式fileSystem,indexdb和webSQL系統提供的API就是異步的方式，為了封裝接口提供同步的API，必然有效率上的損失。 因為啟動時會一次性加載離線緩沖庫中的所有數據，故獲取數據的時間會相應變長，對于少量數據，可以忽略不計，如果數據量特別大，即該插件會明顯減慢加載速 度。
(2) 數據會全部拷貝到內存中，會占用部分瀏覽器內存。
建議：
該插件式為了方便同步使用離線緩存庫，對于小數據量很方便，對于大數據來說，不推薦使用該插件，建議都采用異步的方式調用離線緩存庫提供的接口API。
注：正常使用該庫的時候必須保證synCache初始化成功。
2.源文件
HTML5離線緩存管理庫的同步插件鏈接：
http://3gimg.qq.com/cube/cache/cache_plugin_sync-1.0.js
目前，“手機酷站”iphone版使用了"HTML5離線緩存管理庫"和“同步插件”，相關鏈接如下：
http://app.html5.qq.com/ip/index
學習軟件行業，選擇就業的機會更多，拿到的薪水也更可觀，Web前端開發隨著互聯網的不斷發展，就業前景更廣泛。千鋒教育重慶Web前端培訓，專業的IT培訓機構，全國15所城市都設有分校，是IT職業教育領先品牌，學員入學就簽訂就業協議，2017年畢業學員首次就業平均月薪10000元，強大的師資力量與完善的就業體系，讓你高薪就業不再是夢想!
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
