瀏覽器緩存（Browser Caching）是瀏覽器端保存數(shù)據(jù)用于快速讀取或避免重復(fù)資源請求的優(yōu)化機制决记，有效的緩存使用可以避免重復(fù)的網(wǎng)絡(luò)請求和瀏覽器快速地讀取本地數(shù)據(jù)溃论，整體上加速網(wǎng)頁展示給用戶滔金。瀏覽器端緩存的機制種類較多色解，總體歸納為九種，這里詳細分析下這九種緩存機制的原理和使用場景餐茵。打開瀏覽器的調(diào)試模式->resources左側(cè)就有瀏覽器的8種緩存機制科阎。
一、http緩存
http緩存是基于HTTP協(xié)議的瀏覽器文件級緩存機制忿族。即針對文件的重復(fù)請求情況下锣笨，瀏覽器可以根據(jù)協(xié)議頭判斷從服務(wù)器端請求文件還是從本地讀取文件，chrome控制臺下的Frames即展示的是瀏覽器的http文件級緩存道批。以下是瀏覽器緩存的整個機制流程错英。主要是針對重復(fù)的http請求，在有緩存的情況下判斷過程主要分3步：
判斷expires隆豹，如果未過期椭岩，直接讀取http緩存文件，不發(fā)http請求璃赡，否則進入下一步
判斷是否含有etag判哥，有則帶上if-none-match發(fā)送請求，未修改返回304碉考，修改返回200塌计，否則進入下一步
判斷是否含有l(wèi)ast-modified，有則帶上if-modified-since發(fā)送請求侯谁，無效返回200锌仅，有效返回304，否則直接向服務(wù)器請求
??
如果通過etag和last-modified判斷墙贱，即使返回304有至少有一次http請求热芹，只不過返回的是304的返回內(nèi)容，而不是文件內(nèi)容惨撇。所以合理設(shè)計實現(xiàn)expires參數(shù)可以減少較多的瀏覽器請求剿吻。
二、websql
websql這種方式只有較新的chrome瀏覽器支持串纺，并以一個獨立規(guī)范形式出現(xiàn)丽旅，主要有以下特點
Web Sql 數(shù)據(jù)庫API 實際上不是HTML5規(guī)范的組成部分；
在HTML5之前就已經(jīng)存在了纺棺，是單獨的規(guī)范榄笙；
它是將數(shù)據(jù)以數(shù)據(jù)庫的形式存儲在客戶端，根據(jù)需求去讀鹊或颉茅撞；
跟Storage的區(qū)別是： Storage和Cookie都是以鍵值對的形式存在的；
Web Sql 更方便于檢索，允許sql語句查詢米丘；
讓瀏覽器實現(xiàn)小型數(shù)據(jù)庫存儲功能剑令；
這個數(shù)據(jù)庫是集成在瀏覽器里面的，目前主流瀏覽器基本都已支持拄查；
websql API主要包含三個核心方法：
openDatabase : 這個方法使用現(xiàn)有數(shù)據(jù)庫或創(chuàng)建新數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)庫對象吁津。
transaction : 這個方法允許我們根據(jù)情況控制事務(wù)提交或回滾。
executeSql : 這個方法用于執(zhí)行真實的SQL查詢堕扶。
openDatabase方法可以打開已經(jīng)存在的數(shù)據(jù)庫碍脏，不存在則創(chuàng)建
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
openDatabasek中五個參數(shù)分別為：數(shù)據(jù)庫名、版本號稍算、描述典尾、數(shù)據(jù)庫大小、創(chuàng)建回調(diào)糊探。創(chuàng)建回調(diào)沒有也可以創(chuàng)建數(shù)據(jù)庫钾埂。
database.transaction() 函數(shù)用來查詢，executeSql()用于執(zhí)行sql語句
例如在mydatabase數(shù)據(jù)庫中創(chuàng)建表t1：
var db = openDatabase(' mydatabase ', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
});
插入操作
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
? db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');
});
在插入新記錄時科平，我們還可以傳遞動態(tài)值褥紫，如：
var db = openDatabase(' mydatabase ', '2.0', 'my db', 2 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
tx.executeSql('INSERT INTO t1 (id,log) VALUES (?, ?'), [e_id, e_log]; ?//e_id和e_log是外部變量
});
讀操作，如果要讀取已經(jīng)存在的記錄匠抗，我們使用一個回調(diào)捕獲結(jié)果：
var db = openDatabase(mydatabase, '2.0', 'my db', 2*1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM t1, [], function (tx, results) {
var len = results.rows.length, i;
? ? ?msg = "
Found rows: " + len + "
"; ?document.querySelector('#status').innerHTML += ?msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});
三故源、indexDB
IndexedDB 是一個為了能夠在客戶端存儲可觀數(shù)量的結(jié)構(gòu)化數(shù)據(jù)污抬，并且在這些數(shù)據(jù)上使用索引進行高性能檢索的 API汞贸。雖然 DOM 存儲對于存儲少量數(shù)據(jù)是非常有用的，但是它對大量結(jié)構(gòu)化數(shù)據(jù)的存儲就顯得力不從心了印机。IndexedDB 則提供了這樣的一個解決方案矢腻。IndexedDB 分別為同步和異步訪問提供了單獨的 API 。同步 API 本來是要用于僅供 Web Workers 內(nèi)部使用射赛，但是還沒有被任何瀏覽器所實現(xiàn)多柑。異步 API 在 Web Workers 內(nèi)部和外部都可以使用，另外瀏覽器可能對indexDB有50M大小的限制楣责，一般用戶保存大量用戶數(shù)據(jù)并要求數(shù)據(jù)之間有搜索需要的場景竣灌。
異步API
異步 API 方法調(diào)用完后會立即返回，而不會阻塞調(diào)用線程秆麸。要異步訪問數(shù)據(jù)庫初嘹，要調(diào)用 window 對象 indexedDB 屬性的 open() 方法。該方法返回一個 IDBRequest 對象 (IDBOpenDBRequest)沮趣；異步操作通過在 IDBRequest 對象上觸發(fā)事件來和調(diào)用程序進行通信屯烦。
- IDBFactory 提供了對數(shù)據(jù)庫的訪問。這是由全局對象 indexedDB 實現(xiàn)的接口，因而也是該 API 的入口驻龟。
- IDBCursor 遍歷對象存儲空間和索引温眉。
- IDBCursorWithValue 遍歷對象存儲空間和索引并返回游標(biāo)的當(dāng)前值。
- IDBDatabase 表示到數(shù)據(jù)庫的連接翁狐。只能通過這個連接來拿到一個數(shù)據(jù)庫事務(wù)类溢。
- IDBEnvironment 提供了到客戶端數(shù)據(jù)庫的訪問。它由 window 對象實現(xiàn)谴蔑。
- IDBIndex 提供了到索引元數(shù)據(jù)的訪問豌骏。
- IDBKeyRange 定義鍵的范圍。
- IDBObjectStore 表示一個對象存儲空間隐锭。
- IDBOpenDBRequest 表示一個打開數(shù)據(jù)庫的請求窃躲。
-IDBRequest 提供了到數(shù)據(jù)庫異步請求結(jié)果和數(shù)據(jù)庫的訪問。這也是在你調(diào)用一個異步方法時所得到的钦睡。
- IDBTransaction 表示一個事務(wù)蒂窒。你在數(shù)據(jù)庫上創(chuàng)建一個事務(wù)，指定它的范圍（例如你希望訪問哪一個對象存儲空間）荞怒，并確定你希望的訪問類型（只讀或?qū)懭耄?/p>
- IDBVersionChangeEvent 表明數(shù)據(jù)庫的版本號已經(jīng)改變洒琢。
同步API
規(guī)范里面還定義了 API 的同步版本。同步 API 還沒有在任何瀏覽器中得以實現(xiàn)褐桌。它原本是要和 webWork 一起使用的衰抑。
http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js http://caniuse.com/#feat=indexeddb
四、cookie
Cookie（或者Cookies）荧嵌，指一般網(wǎng)站為了辨別用戶身份呛踊、進行session跟蹤而儲存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密）。cookie一般通過http請求中在頭部一起發(fā)送到服務(wù)器端啦撮。一條cookie記錄主要由鍵谭网、值、域赃春、過期時間愉择、大小組成，一般用戶保存用戶的認(rèn)證信息织中。cookie最大長度和域名個數(shù)由不同瀏覽器決定锥涕，具體如下：
瀏覽器 支持域名個數(shù) 最大長度
IE7以上 50個 4095B
Firefox 50個 4097B
Opera 30個 4096B
Safari/WebKit 無限制 4097B
不同域名之間的cookie信息是獨立的，如果需要設(shè)置共享可以在服務(wù)器端設(shè)置cookie的path和domain來實現(xiàn)共享狭吼。瀏覽器端也可以通過document.cookie來獲取cookie层坠，并通過js瀏覽器端也可以方便地讀取/設(shè)置cookie的值。
https://github.com/component/cookie/blob/master/index.js
五搏嗡、localstorage
localStorage是html5的一種新的本地緩存方案窿春，目前用的比較多拉一，一般用來存儲ajax返回的數(shù)據(jù)，加快下次頁面打開時的渲染速度旧乞。
瀏覽器 最大長度
IE8以上 5M
Firefox 8以上 5.24M
Opera 2M
Safari/WebKit 2.6M
//localStorage核心API:
localStorage.setItem(key, value) ? ?//設(shè)置記錄
localStorage.getItem(key) ? ? ? ? ? ?//獲取記錄
localStorage.removeItem(key) ? ? ? ?//刪除該域名下單條記錄
localStorage.clear() ? ? ? ? ? ? ? ?//刪除該域名下所有記錄
值得注意的是蔚润，localstorage大小有限制，不適合存放過多的數(shù)據(jù)尺栖，如果數(shù)據(jù)存放超過最大限制會報錯嫡纠，并移除最先保存的數(shù)據(jù)。
https://github.com/machao/localStorage
六延赌、sessionstorage
sessionStorage和localstorage類似除盏，但是瀏覽器關(guān)閉則會全部刪除，api和localstorage相同挫以，實際項目中使用較少者蠕。
七、application cache
application cahce是將大部分圖片資源掐松、js踱侣、css等靜態(tài)資源放在manifest文件配置中。當(dāng)頁面打開時通過manifest文件來讀取本地文件或是請求服務(wù)器文件大磺。
離線訪問對基于網(wǎng)絡(luò)的應(yīng)用而言越來越重要抡句。雖然所有瀏覽器都有緩存機制，但它們并不可靠杠愧，也不一定總能起到預(yù)期的作用待榔。HTML5 使用ApplicationCache 接口可以解決由離線帶來的部分難題。前提是你需要訪問的web頁面至少被在線訪問過一次流济。
使用緩存接口可為您的應(yīng)用帶來以下三個優(yōu)勢：
離線瀏覽 – 用戶可在離線時瀏覽您的完整網(wǎng)站
速度 – 緩存資源為本地資源锐锣，因此加載速度較快。
服務(wù)器負(fù)載更少 – 瀏覽器只會從發(fā)生了更改的服務(wù)器下載資源袭灯。
??一個簡單的離線頁面主要包含以下幾個部分：
index.html
clock.manifest
CACHE MANIFEST
#VERSION 1.0
CACHE:
clock.css
clock.js
clock.js和clock.css為獨立的另外文件刺下。另外需要注意的是更新緩存绑嘹。在程序中稽荧，你可以通過window.applicationCache 對象來訪問瀏覽器的app cache。你可以查看 status 屬性來獲取cache的當(dāng)前狀態(tài)：
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: ?// UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};
??為了通過編程更新cache工腋，首先調(diào)用 applicationCache.update()姨丈。這將會試圖更新用戶的 cache（要求manifest文件已經(jīng)改變）。最后擅腰，當(dāng)applicationCache.status 處于 UPDATEREADY 狀態(tài)時蟋恬，調(diào)用applicationCache.swapCache()，舊的cache就會被置換成新的趁冈。
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user’s cache.
…
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); ?// The fetch was successful, swap in the new cache.
}
??這里是通過更新menifest文件來控制其它文件更新的歼争。
八拜马、cacheStorage
??CacheStorage是在ServiceWorker的規(guī)范中定義的。CacheStorage 可以保存每個serverWorker申明的cache對象沐绒，cacheStorage有open俩莽、match、has乔遮、delete扮超、keys五個核心方法，可以對cache對象的不同匹配進行不同的響應(yīng)蹋肮。
cacheStorage.has() 如果包含cache對象出刷，則返回一個promise對象。cacheStorage.open() 打開一個cache對象坯辩，則返回一個promise對象馁龟。cacheStorage.delete() 刪除cache對象，成功則返回一個promise對象漆魔，否則返回false屁柏。cacheStorage.keys() 含有keys中字符串的任意一個，則返回一個promise對象有送。cacheStorage.delete() 匹配key中含有該字符串的cache對象淌喻，返回一個promise對象。
caches.has('v1').then(function() {
caches.open('v1').then(function(cache) {
return cache.addAll(myAssets);
});
}).catch(function() {
someCacheSetupfunction();
});;
var response;
var cachedResponse = caches.match(event.request).catch(function() {
return fetch(event.request);
}).then(function(r) {
response = r;
caches.open('v1').then(function(cache) {
cache.put(event.request, response);
});
return response.clone();
}).catch(function() {
return caches.match('/sw-test/gallery/myLittleVader.jpg');
});
then.addEventListener('activate', function(event) {
var cacheWhitelist = ['v2'];
event.waitUntil(
? ?caches.keys().then(function(keyList) {
? ? ?return Promise.all(keyList.map(function(key) {
? ? ? ?if (cacheWhitelist.indexOf(key) === -1) {
? ? ? ? ?return caches.delete(keyList[i]);
? ? ? ?}
? ? ?});
? ?})
?);
});
https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage
九雀摘、flash緩存
??這種方式基本不用裸删，這一方法主要基于flash有讀寫瀏覽器端本地目錄的功能，同時也可以向js提供調(diào)用的api阵赠，則頁面可以通過js調(diào)用flash去讀寫特定的磁盤目錄涯塔，達到本地數(shù)據(jù)緩存的目的。
注釋PS
Web Storage / Web SQL Database / Indexed Database 的數(shù)據(jù)都存儲在瀏覽器對應(yīng)的用戶配置文件目錄(user profile directory)下清蚀，以 Windows 7 為例匕荸，Chrome 的數(shù)據(jù)存儲在”C:\Users\your-account-name\AppData\Local\Google\Chrome\User Data\Default\”下，而 Firefox 的數(shù)據(jù)存儲在”C:\Users\your-account-name\AppData\Local\Mozilla\Firefox\Profiles\”目錄下枷邪。
cookie文件存儲于documents and settings\userName\cookie\文件夾下榛搔。通常的命名格式為：userName@domain.txt。
較多的緩存機制目前主流瀏覽器并不兼容东揣，不過可以使用polyfill的方法來處理
瀏覽器涉及的緩存方式主要包含這些践惑，具體結(jié)合自己的業(yè)務(wù)場景。
