來(lái)源：https://my.oschina.net/zhangstephen/blog/591575
摘要: 瀏覽器緩存（Browser Caching）是瀏覽器端保存數(shù)據(jù)用于快速讀取或避免重復(fù)資源請(qǐng)求的優(yōu)化機(jī)制，有效的緩存使用可以避免重復(fù)的網(wǎng)絡(luò)請(qǐng)求和瀏覽器快速地讀取本地?cái)?shù)據(jù)，整體上加速網(wǎng)頁(yè)展示給用戶(hù)。瀏覽器端緩存的機(jī)制種類(lèi)較多，總體歸納為九種，這里詳細(xì)分析下這九種緩存機(jī)制的原理和使用場(chǎng)景。打開(kāi)瀏覽器的調(diào)試模式->resources左側(cè)就有瀏覽器的8種緩存機(jī)制。

瀏覽器緩存（Browser Caching）是瀏覽器端保存數(shù)據(jù)用于快速讀取或避免重復(fù)資源請(qǐng)求的優(yōu)化機(jī)制，有效的緩存使用可以避免重復(fù)的網(wǎng)絡(luò)請(qǐng)求和瀏覽器快速地讀取本地?cái)?shù)據(jù)，整體上加速網(wǎng)頁(yè)展示給用戶(hù)。瀏覽器端緩存的機(jī)制種類(lèi)較多，總體歸納為九種，這里詳細(xì)分析下這九種緩存機(jī)制的原理和使用場(chǎng)景。打開(kāi)瀏覽器的調(diào)試模式->resources左側(cè)就有瀏覽器的8種緩存機(jī)制。

一、http緩存
http緩存是基于HTTP協(xié)議的瀏覽器文件級(jí)緩存機(jī)制。即針對(duì)文件的重復(fù)請(qǐng)求情況下，瀏覽器可以根據(jù)協(xié)議頭判斷從服務(wù)器端請(qǐng)求文件還是從本地讀取文件，chrome控制臺(tái)下的Frames即展示的是瀏覽器的http文件級(jí)緩存。以下是瀏覽器緩存的整個(gè)機(jī)制流程。主要是針對(duì)重復(fù)的http請(qǐng)求，在有緩存的情況下判斷過(guò)程主要分3步：
判斷expires，如果未過(guò)期，直接讀取http緩存文件，不發(fā)http請(qǐng)求，否則進(jìn)入下一步
判斷是否含有etag，有則帶上if-none-match發(fā)送請(qǐng)求，未修改返回304，修改返回200，否則進(jìn)入下一步
判斷是否含有l(wèi)ast-modified，有則帶上if-modified-since發(fā)送請(qǐng)求，無(wú)效返回200，有效返回304，否則直接向服務(wù)器請(qǐng)求

如果通過(guò)etag和last-modified判斷，即使返回304有至少有一次http請(qǐng)求，只不過(guò)返回的是304的返回內(nèi)容，而不是文件內(nèi)容。所以合理設(shè)計(jì)實(shí)現(xiàn)expires參數(shù)可以減少較多的瀏覽器請(qǐng)求。
二、websql
websql這種方式只有較新的chrome瀏覽器支持，并以一個(gè)獨(dú)立規(guī)范形式出現(xiàn)，主要有以下特點(diǎn)
Web Sql 數(shù)據(jù)庫(kù)API 實(shí)際上不是HTML5規(guī)范的組成部分；
在HTML5之前就已經(jīng)存在了，是單獨(dú)的規(guī)范；
它是將數(shù)據(jù)以數(shù)據(jù)庫(kù)的形式存儲(chǔ)在客戶(hù)端，根據(jù)需求去讀??；
跟Storage的區(qū)別是： Storage和Cookie都是以鍵值對(duì)的形式存在的；
Web Sql 更方便于檢索，允許sql語(yǔ)句查詢(xún)；
讓瀏覽器實(shí)現(xiàn)小型數(shù)據(jù)庫(kù)存儲(chǔ)功能；
這個(gè)數(shù)據(jù)庫(kù)是集成在瀏覽器里面的，目前主流瀏覽器基本都已支持；

websql API主要包含三個(gè)核心方法：
openDatabase : 這個(gè)方法使用現(xiàn)有數(shù)據(jù)庫(kù)或創(chuàng)建新數(shù)據(jù)庫(kù)創(chuàng)建數(shù)據(jù)庫(kù)對(duì)象。
transaction : 這個(gè)方法允許我們根據(jù)情況控制事務(wù)提交或回滾。
executeSql : 這個(gè)方法用于執(zhí)行真實(shí)的SQL查詢(xún)。

openDatabase方法可以打開(kāi)已經(jīng)存在的數(shù)據(jù)庫(kù)，不存在則創(chuàng)建
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);

openDatabasek中五個(gè)參數(shù)分別為：數(shù)據(jù)庫(kù)名、版本號(hào)、描述、數(shù)據(jù)庫(kù)大小、創(chuàng)建回調(diào)。創(chuàng)建回調(diào)沒(méi)有也可以創(chuàng)建數(shù)據(jù)庫(kù)。
database.transaction() 函數(shù)用來(lái)查詢(xún)，executeSql()用于執(zhí)行sql語(yǔ)句
例如在mydatabase數(shù)據(jù)庫(kù)中創(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")'); });

在插入新記錄時(shí)，我們還可以傳遞動(dòng)態(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)存在的記錄，我們使用一個(gè)回調(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 = "<p>Found rows: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ alert(results.rows.item(i).log ); } }, null); });

三、indexDB
IndexedDB 是一個(gè)為了能夠在客戶(hù)端存儲(chǔ)可觀數(shù)量的結(jié)構(gòu)化數(shù)據(jù)，并且在這些數(shù)據(jù)上使用索引進(jìn)行高性能檢索的 API。雖然 DOM 存儲(chǔ) 對(duì)于存儲(chǔ)少量數(shù)據(jù)是非常有用的，但是它對(duì)大量結(jié)構(gòu)化數(shù)據(jù)的存儲(chǔ)就顯得力不從心了。IndexedDB 則提供了這樣的一個(gè)解決方案。 IndexedDB 分別為同步和異步訪(fǎng)問(wèn)提供了單獨(dú)的 API 。同步 API 本來(lái)是要用于僅供 Web Workers 內(nèi)部使用，但是還沒(méi)有被任何瀏覽器所實(shí)現(xiàn)。異步 API 在 Web Workers 內(nèi)部和外部都可以使用，另外瀏覽器可能對(duì)indexDB有50M大小的限制，一般用戶(hù)保存大量用戶(hù)數(shù)據(jù)并要求數(shù)據(jù)之間有搜索需要的場(chǎng)景。
異步API

異步 API 方法調(diào)用完后會(huì)立即返回，而不會(huì)阻塞調(diào)用線(xiàn)程。要異步訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)，要調(diào)用 window 對(duì)象 indexedDB 屬性的 open() 方法。該方法返回一個(gè) IDBRequest 對(duì)象 (IDBOpenDBRequest)；異步操作通過(guò)在 IDBRequest 對(duì)象上觸發(fā)事件來(lái)和調(diào)用程序進(jìn)行通信。

• IDBFactory 提供了對(duì)數(shù)據(jù)庫(kù)的訪(fǎng)問(wèn)。這是由全局對(duì)象 indexedDB 實(shí)現(xiàn)的接口，因而也是該 API 的入口。- IDBCursor 遍歷對(duì)象存儲(chǔ)空間和索引。- IDBCursorWithValue 遍歷對(duì)象存儲(chǔ)空間和索引并返回游標(biāo)的當(dāng)前值。- IDBDatabase 表示到數(shù)據(jù)庫(kù)的連接。只能通過(guò)這個(gè)連接來(lái)拿到一個(gè)數(shù)據(jù)庫(kù)事務(wù)。- IDBEnvironment 提供了到客戶(hù)端數(shù)據(jù)庫(kù)的訪(fǎng)問(wèn)。它由 window 對(duì)象實(shí)現(xiàn)。- IDBIndex 提供了到索引元數(shù)據(jù)的訪(fǎng)問(wèn)。- IDBKeyRange 定義鍵的范圍。- IDBObjectStore 表示一個(gè)對(duì)象存儲(chǔ)空間。- IDBOpenDBRequest 表示一個(gè)打開(kāi)數(shù)據(jù)庫(kù)的請(qǐng)求。-IDBRequest 提供了到數(shù)據(jù)庫(kù)異步請(qǐng)求結(jié)果和數(shù)據(jù)庫(kù)的訪(fǎng)問(wèn)。這也是在你調(diào)用一個(gè)異步方法時(shí)所得到的。- IDBTransaction 表示一個(gè)事務(wù)。你在數(shù)據(jù)庫(kù)上創(chuàng)建一個(gè)事務(wù)，指定它的范圍（例如你希望訪(fǎng)問(wèn)哪一個(gè)對(duì)象存儲(chǔ)空間），并確定你希望的訪(fǎng)問(wèn)類(lèi)型（只讀或?qū)懭耄? IDBVersionChangeEvent 表明數(shù)據(jù)庫(kù)的版本號(hào)已經(jīng)改變。

同步API

規(guī)范里面還定義了API 的同步版本。同步 API 還沒(méi)有在任何瀏覽器中得以實(shí)現(xiàn)。它原本是要和webWork一起使用的。
http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.jshttp://caniuse.com/#feat=indexeddb
四、cookie
Cookie（或者Cookies），指一般網(wǎng)站為了辨別用戶(hù)身份、進(jìn)行session跟蹤而儲(chǔ)存在用戶(hù)本地終端上的數(shù)據(jù)（通常經(jīng)過(guò)加密）。cookie一般通過(guò)http請(qǐng)求中在頭部一起發(fā)送到服務(wù)器端。一條cookie記錄主要由鍵、值、域、過(guò)期時(shí)間、大小組成，一般用戶(hù)保存用戶(hù)的認(rèn)證信息。cookie最大長(zhǎng)度和域名個(gè)數(shù)由不同瀏覽器決定，具體如下：
瀏覽器
支持域名個(gè)數(shù)
最大長(zhǎng)度

IE7以上
50個(gè)
4095B

Firefox
50個(gè)
4097B

Opera
30個(gè)
4096B

Safari/WebKit
無(wú)限制
4097B

不同域名之間的cookie信息是獨(dú)立的，如果需要設(shè)置共享可以在服務(wù)器端設(shè)置cookie的path和domain來(lái)實(shí)現(xiàn)共享。瀏覽器端也可以通過(guò)document.cookie來(lái)獲取cookie，并通過(guò)js瀏覽器端也可以方便地讀取/設(shè)置cookie的值。
https://github.com/component/cookie/blob/master/index.js
五、localstorage
localStorage是html5的一種新的本地緩存方案，目前用的比較多，一般用來(lái)存儲(chǔ)ajax返回的數(shù)據(jù)，加快下次頁(yè)面打開(kāi)時(shí)的渲染速度。
瀏覽器
最大長(zhǎng)度

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大小有限制，不適合存放過(guò)多的數(shù)據(jù)，如果數(shù)據(jù)存放超過(guò)最大限制會(huì)報(bào)錯(cuò)，并移除最先保存的數(shù)據(jù)。
https://github.com/machao/localStorage
六、sessionstorage
sessionStorage和localstorage類(lèi)似，但是瀏覽器關(guān)閉則會(huì)全部刪除，api和localstorage相同，實(shí)際項(xiàng)目中使用較少。
七、application cache
application cahce是將大部分圖片資源、js、css等靜態(tài)資源放在manifest文件配置中。當(dāng)頁(yè)面打開(kāi)時(shí)通過(guò)manifest文件來(lái)讀取本地文件或是請(qǐng)求服務(wù)器文件。 離線(xiàn)訪(fǎng)問(wèn)對(duì)基于網(wǎng)絡(luò)的應(yīng)用而言越來(lái)越重要。雖然所有瀏覽器都有緩存機(jī)制，但它們并不可靠，也不一定總能起到預(yù)期的作用。HTML5 使用ApplicationCache 接口可以解決由離線(xiàn)帶來(lái)的部分難題。前提是你需要訪(fǎng)問(wèn)的web頁(yè)面至少被在線(xiàn)訪(fǎng)問(wèn)過(guò)一次。 使用緩存接口可為您的應(yīng)用帶來(lái)以下三個(gè)優(yōu)勢(shì)：
離線(xiàn)瀏覽 – 用戶(hù)可在離線(xiàn)時(shí)瀏覽您的完整網(wǎng)站
速度 – 緩存資源為本地資源，因此加載速度較快。
服務(wù)器負(fù)載更少 – 瀏覽器只會(huì)從發(fā)生了更改的服務(wù)器下載資源。

一個(gè)簡(jiǎn)單的離線(xiàn)頁(yè)面主要包含以下幾個(gè)部分：
index.html
<html manifest="clock.manifest"> <head> <title>AppCache Test</title> <link rel="stylesheet" href="clock.css"> <script src="clock.js"></script> </head> <body> <p><output id="clock"></output></p> <div id="log"></div> </body></html>

clock.manifest
CACHE MANIFEST#VERSION 1.0CACHE:clock.cssclock.js

clock.js和clock.css為獨(dú)立的另外文件。 另外需要注意的是更新緩存。在程序中，你可以通過(guò)window.applicationCache 對(duì)象來(lái)訪(fǎng)問(wèn)瀏覽器的app cache。你可以查看 status 屬性來(lái)獲取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;};

為了通過(guò)編程更新cache，首先調(diào)用 applicationCache.update()。這將會(huì)試圖更新用戶(hù)的 cache（要求manifest文件已經(jīng)改變）。最后，當(dāng) applicationCache.status 處于 UPDATEREADY 狀態(tài)時(shí)， 調(diào)用applicationCache.swapCache()，舊的cache就會(huì)被置換成新的。
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.}

這里是通過(guò)更新menifest文件來(lái)控制其它文件更新的。
八、cacheStorage
CacheStorage是在ServiceWorker的規(guī)范中定義的。CacheStorage 可以保存每個(gè)serverWorker申明的cache對(duì)象，cacheStorage有open、match、has、delete、keys五個(gè)核心方法，可以對(duì)cache對(duì)象的不同匹配進(jìn)行不同的響應(yīng)。
cacheStorage.has()如果包含cache對(duì)象，則返回一個(gè)promise對(duì)象。cacheStorage.open()打開(kāi)一個(gè)cache對(duì)象，則返回一個(gè)promise對(duì)象。cacheStorage.delete()刪除cache對(duì)象，成功則返回一個(gè)promise對(duì)象，否則返回false。cacheStorage.keys()含有keys中字符串的任意一個(gè)，則返回一個(gè)promise對(duì)象。cacheStorage.delete()匹配key中含有該字符串的cache對(duì)象，返回一個(gè)promise對(duì)象。
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有讀寫(xiě)瀏覽器端本地目錄的功能，同時(shí)也可以向js提供調(diào)用的api，則頁(yè)面可以通過(guò)js調(diào)用flash去讀寫(xiě)特定的磁盤(pán)目錄，達(dá)到本地?cái)?shù)據(jù)緩存的目的。
注釋PS
Web Storage / Web SQL Database / Indexed Database 的數(shù)據(jù)都存儲(chǔ)在瀏覽器對(duì)應(yīng)的用戶(hù)配置文件目錄(user profile directory)下，以 Windows 7 為例，Chrome 的數(shù)據(jù)存儲(chǔ)在”C:\Users\your-account-name\AppData\Local\Google\Chrome\User Data\Default\”下，而 Firefox 的數(shù)據(jù)存儲(chǔ)在”C:\Users\your-account-name\AppData\Local\Mozilla\Firefox\Profiles\”目錄下。
cookie文件存儲(chǔ)于documents and settings\userName\cookie\文件夾下。通常的命名格式為：userName@domain.txt。

較多的緩存機(jī)制目前主流瀏覽器并不兼容，不過(guò)可以使用polyfill的方法來(lái)處理

瀏覽器涉及的緩存方式主要包含這些，具體結(jié)合自己的業(yè)務(wù)場(chǎng)景進(jìn)行選擇使用
https://ouvens.github.io/frontend-javascript/2015/12/28/nine-browser-cache-methods.html