瀏覽器緩存（Browser Caching）是瀏覽器端保存數據用於快速讀取或避免重複資源請求的優化機制，有效的緩存使用可以避免重複的網絡請求和瀏覽器快速地讀取本地數據，整體上加速網頁展示給用戶。瀏覽器端緩存的機制種類較多，總體歸納爲九種，這裏詳細分析下這九種緩存機制的原理和使用場景。打開瀏覽器的調試模式->resources左側就有瀏覽器的8種緩存機制。
一、http緩存
http緩存是基於HTTP協議的瀏覽器文件級緩存機制。即針對文件的重複請求情況下，瀏覽器可以根據協議頭判斷從服務器端請求文件還是從本地讀取文件，chrome控制檯下的Frames即展示的是瀏覽器的http文件級緩存。以下是瀏覽器緩存的整個機制流程。主要是針對重複的http請求，在有緩存的情況下判斷過程主要分3步：
- 判斷expires，如果未過期，直接讀取http緩存文件，不發http請求，否則進入下一步
- 判斷是否含有etag，有則帶上if-none-match發送請求，未修改返回304，修改返回200，否則進入下一步
- 判斷是否含有last-modified，有則帶上if-modified-since發送請求，無效返回200，有效返回304，否則直接向服務器請求
如果通過etag和last-modified判斷，即使返回304有至少有一次http請求，只不過返回的是304的返回內容，而不是文件內容。所以合理設計實現expires參數可以減少較多的瀏覽器請求。
二、websql
websql這種方式只有較新的chrome瀏覽器支持，並以一個獨立規範形式出現，主要有以下特點
- Web Sql 數據庫API 實際上不是HTML5規範的組成部分；
- 在HTML5之前就已經存在了，是單獨的規範；
- 它是將數據以數據庫的形式存儲在客戶端，根據需求去讀取；
- 跟Storage的區別是： Storage和Cookie都是以鍵值對的形式存在的；
- Web Sql 更方便於檢索，允許sql語句查詢；
- 讓瀏覽器實現小型數據庫存儲功能；
- 這個數據庫是集成在瀏覽器裏面的，目前主流瀏覽器基本都已支持；
websql API主要包含三個核心方法：
- openDatabase : 這個方法使用現有數據庫或創建新數據庫創建數據庫對象。
- transaction : 這個方法允許我們根據情況控制事務提交或回滾。
- executeSql : 這個方法用於執行真實的SQL查詢。
openDatabase方法可以打開已經存在的數據庫，不存在則創建
-
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
openDatabasek中五個參數分別爲：數據庫名、版本號、描述、數據庫大小、創建回調。創建回調沒有也可以創建數據庫。
database.transaction() 函數用來查詢，executeSql()用於執行sql語句
例如在mydatabase數據庫中創建表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")'); -
});
在插入新記錄時，我們還可以傳遞動態值，如：
-
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是外部變量 -
});
讀操作，如果要讀取已經存在的記錄，我們使用一個回調捕獲結果：
-
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 是一個爲了能夠在客戶端存儲可觀數量的結構化數據，並且在這些數據上使用索引進行高性能檢索的 API。雖然 DOM 存儲 對於存儲少量數據是非常有用的，但是它對大量結構化數據的存儲就顯得力不從心了。IndexedDB 則提供了這樣的一個解決方案。 IndexedDB 分別爲同步和異步訪問提供了單獨的 API 。同步 API 本來是要用於僅供 Web Workers 內部使用，但是還沒有被任何瀏覽器所實現。異步 API 在 Web Workers 內部和外部都可以使用，另外瀏覽器可能對indexDB有50M大小的限制，一般用戶保存大量用戶數據並要求數據之間有搜索需要的場景。
- 異步API
異步 API 方法調用完後會立即返回，而不會阻塞調用線程。要異步訪問數據庫，要調用 window 對象 indexedDB 屬性的 open() 方法。該方法返回一個 IDBRequest 對象 (IDBOpenDBRequest)；異步操作通過在 IDBRequest 對象上觸發事件來和調用程序進行通信。
-
- IDBFactory 提供了對數據庫的訪問。這是由全局對象 indexedDB 實現的接口，因而也是該 API 的入口。 -
- IDBCursor 遍歷對象存儲空間和索引。 -
- IDBCursorWithValue 遍歷對象存儲空間和索引並返回遊標的當前值。 -
- IDBDatabase 表示到數據庫的連接。只能通過這個連接來拿到一個數據庫事務。 -
- IDBEnvironment 提供了到客戶端數據庫的訪問。它由 window 對象實現。 -
- IDBIndex 提供了到索引元數據的訪問。 -
- IDBKeyRange 定義鍵的範圍。 -
- IDBObjectStore 表示一個對象存儲空間。 -
- IDBOpenDBRequest 表示一個打開數據庫的請求。 -
-IDBRequest 提供了到數據庫異步請求結果和數據庫的訪問。這也是在你調用一個異步方法時所得到的。 -
- IDBTransaction 表示一個事務。你在數據庫上創建一個事務，指定它的範圍（例如你希望訪問哪一個對象存儲空間），並確定你希望的訪問類型（只讀或寫入）。 -
- IDBVersionChangeEvent 表明數據庫的版本號已經改變。
- 同步API
規範裏面還定義了 API 的同步版本。同步 API 還沒有在任何瀏覽器中得以實現。它原本是要和 webWork 一起使用的。
http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js http://caniuse.com/#feat=indexeddb
四、cookie
Cookie（或者Cookies），指一般網站爲了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據（通常經過加密）。cookie一般通過http請求中在頭部一起發送到服務器端。一條cookie記錄主要由鍵、值、域、過期時間、大小組成，一般用戶保存用戶的認證信息。cookie最大長度和域名個數由不同瀏覽器決定，具體如下：
|
瀏覽器緩存（Browser Caching）是瀏覽器端保存數據用於快速讀取或避免重複資源請求的優化機制，有效的緩存使用可以避免重複的網絡請求和瀏覽器快速地讀取本地數據，整體上加速網頁展示給用戶。瀏覽器端緩存的機制種類較多，總體歸納爲九種，這裏詳細分析下這九種緩存機制的原理和使用場景。打開瀏覽器的調試模式->resources左側就有瀏覽器的8種緩存機制。 一、http緩存http緩存是基於HTTP協議的瀏覽器文件級緩存機制。即針對文件的重複請求情況下，瀏覽器可以根據協議頭判斷從服務器端請求文件還是從本地讀取文件，chrome控制檯下的Frames即展示的是瀏覽器的http文件級緩存。以下是瀏覽器緩存的整個機制流程。主要是針對重複的http請求，在有緩存的情況下判斷過程主要分3步：
如果通過etag和last-modified判斷，即使返回304有至少有一次http請求，只不過返回的是304的返回內容，而不是文件內容。所以合理設計實現expires參數可以減少較多的瀏覽器請求。 二、websqlwebsql這種方式只有較新的chrome瀏覽器支持，並以一個獨立規範形式出現，主要有以下特點
websql API主要包含三個核心方法：
openDatabase方法可以打開已經存在的數據庫，不存在則創建
openDatabasek中五個參數分別爲：數據庫名、版本號、描述、數據庫大小、創建回調。創建回調沒有也可以創建數據庫。 database.transaction() 函數用來查詢，executeSql()用於執行sql語句 例如在mydatabase數據庫中創建表t1：
插入操作
在插入新記錄時，我們還可以傳遞動態值，如：
讀操作，如果要讀取已經存在的記錄，我們使用一個回調捕獲結果：
三、indexDBIndexedDB 是一個爲了能夠在客戶端存儲可觀數量的結構化數據，並且在這些數據上使用索引進行高性能檢索的 API。雖然 DOM 存儲 對於存儲少量數據是非常有用的，但是它對大量結構化數據的存儲就顯得力不從心了。IndexedDB 則提供了這樣的一個解決方案。 IndexedDB 分別爲同步和異步訪問提供了單獨的 API 。同步 API 本來是要用於僅供 Web Workers 內部使用，但是還沒有被任何瀏覽器所實現。異步 API 在 Web Workers 內部和外部都可以使用，另外瀏覽器可能對indexDB有50M大小的限制，一般用戶保存大量用戶數據並要求數據之間有搜索需要的場景。
異步 API 方法調用完後會立即返回，而不會阻塞調用線程。要異步訪問數據庫，要調用 window 對象 indexedDB 屬性的 open() 方法。該方法返回一個 IDBRequest 對象 (IDBOpenDBRequest)；異步操作通過在 IDBRequest 對象上觸發事件來和調用程序進行通信。
規範裏面還定義了 API 的同步版本。同步 API 還沒有在任何瀏覽器中得以實現。它原本是要和 webWork 一起使用的。 http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js http://caniuse.com/#feat=indexeddb 四、cookieCookie（或者Cookies），指一般網站爲了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據（通常經過加密）。cookie一般通過http請求中在頭部一起發送到服務器端。一條cookie記錄主要由鍵、值、域、過期時間、大小組成，一般用戶保存用戶的認證信息。cookie最大長度和域名個數由不同瀏覽器決定，具體如下：
不同域名之間的cookie信息是獨立的，如果需要設置共享可以在服務器端設置cookie的path和domain來實現共享。瀏覽器端也可以通過document.cookie來獲取cookie，並通過js瀏覽器端也可以方便地讀取/設置cookie的值。 https://github.com/component/cookie/blob/master/index.js 五、localstoragelocalStorage是html5的一種新的本地緩存方案，目前用的比較多，一般用來存儲ajax返回的數據，加快下次頁面打開時的渲染速度。
值得注意的是，localstorage大小有限制，不適合存放過多的數據，如果數據存放超過最大限制會報錯，並移除最先保存的數據。 https://github.com/machao/localStorage 六、sessionstoragesessionStorage和localstorage類似，但是瀏覽器關閉則會全部刪除，api和localstorage相同，實際項目中使用較少。 七、application cacheapplication cahce是將大部分圖片資源、js、css等靜態資源放在manifest文件配置中。當頁面打開時通過manifest文件來讀取本地文件或是請求服務器文件。 離線訪問對基於網絡的應用而言越來越重要。雖然所有瀏覽器都有緩存機制，但它們並不可靠，也不一定總能起到預期的作用。HTML5 使用ApplicationCache 接口可以解決由離線帶來的部分難題。前提是你需要訪問的web頁面至少被在線訪問過一次。 使用緩存接口可爲您的應用帶來以下三個優勢：
在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過app並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源並進行離線存儲。並在下一次生效。離線的情況下，瀏覽器就直接使用離線存儲的資源。 一個簡單的離線頁面主要包含以下幾個部分： index.html
clock.manifest
clock.js和clock.css爲獨立的另外文件。 另外需要注意的是更新緩存。在程序中，你可以通過window.applicationCache 對象來訪問瀏覽器的app cache。你可以查看 status 屬性來獲取cache的當前狀態：
爲了通過編程更新cache，首先調用 applicationCache.update()。這將會試圖更新用戶的 cache（要求manifest文件已經改變）。最後，當 applicationCache.status 處於 UPDATEREADY 狀態時， 調用applicationCache.swapCache()，舊的cache就會被置換成新的。
這裏是通過更新menifest文件來控制其它文件更新的。 八、cacheStorageCacheStorage是在ServiceWorker的規範中定義的。CacheStorage 可以保存每個serverWorker申明的cache對象，cacheStorage有open、match、has、delete、keys五個核心方法，可以對cache對象的不同匹配進行不同的響應。 cacheStorage.has() 如果包含cache對象，則返回一個promise對象。 cacheStorage.open() 打開一個cache對象，則返回一個promise對象。 cacheStorage.delete() 刪除cache對象，成功則返回一個promise對象，否則返回false。 cacheStorage.keys() 含有keys中字符串的任意一個，則返回一個promise對象。 cacheStorage.delete() 匹配key中含有該字符串的cache對象，返回一個promise對象。
https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage 九、flash緩存這種方式基本不用，這一方法主要基於flash有讀寫瀏覽器端本地目錄的功能，同時也可以向js提供調用的api，則頁面可以通過js調用flash去讀寫特定的磁盤目錄，達到本地數據緩存的目的。 註釋PS
瀏覽器涉及的緩存方式主要包含這些，具體結合自己的業務場景進行選擇使用 |
|||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
不同域名之間的cookie信息是獨立的，如果需要設置共享可以在服務器端設置cookie的path和domain來實現共享。瀏覽器端也可以通過document.cookie來獲取cookie，並通過js瀏覽器端也可以方便地讀取/設置cookie的值。
https://github.com/component/cookie/blob/master/index.js
五、localstorage
localStorage是html5的一種新的本地緩存方案，目前用的比較多，一般用來存儲ajax返回的數據，加快下次頁面打開時的渲染速度。
| 瀏覽器 | 最大長度 |
|---|---|
| IE8以上 | 5M |
| Firefox 8以上 | 5.24M |
| Opera | 2M |
| Safari/WebKit | 2.6M |
-
//localStorage核心API: -
localStorage.setItem(key, value) //設置記錄 -
localStorage.getItem(key) //獲取記錄 -
localStorage.removeItem(key) //刪除該域名下單條記錄 -
localStorage.clear() //刪除該域名下所有記錄
值得注意的是，localstorage大小有限制，不適合存放過多的數據，如果數據存放超過最大限制會報錯，並移除最先保存的數據。
https://github.com/machao/localStorage
六、sessionstorage
sessionStorage和localstorage類似，但是瀏覽器關閉則會全部刪除，api和localstorage相同，實際項目中使用較少。
七、application cache
application cahce是將大部分圖片資源、js、css等靜態資源放在manifest文件配置中。當頁面打開時通過manifest文件來讀取本地文件或是請求服務器文件。 離線訪問對基於網絡的應用而言越來越重要。雖然所有瀏覽器都有緩存機制，但它們並不可靠，也不一定總能起到預期的作用。HTML5 使用ApplicationCache 接口可以解決由離線帶來的部分難題。前提是你需要訪問的web頁面至少被在線訪問過一次。 使用緩存接口可爲您的應用帶來以下三個優勢：
- 離線瀏覽 – 用戶可在離線時瀏覽您的完整網站
- 速度 – 緩存資源爲本地資源，因此加載速度較快。
- 服務器負載更少 – 瀏覽器只會從發生了更改的服務器下載資源。
一個簡單的離線頁面主要包含以下幾個部分：
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.0 -
CACHE: -
clock.css -
clock.js
clock.js和clock.css爲獨立的另外文件。 另外需要注意的是更新緩存。在程序中，你可以通過window.applicationCache 對象來訪問瀏覽器的app cache。你可以查看 status 屬性來獲取cache的當前狀態：
-
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，首先調用 applicationCache.update()。這將會試圖更新用戶的 cache（要求manifest文件已經改變）。最後，當 applicationCache.status 處於 UPDATEREADY 狀態時， 調用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的規範中定義的。CacheStorage 可以保存每個serverWorker申明的cache對象，cacheStorage有open、match、has、delete、keys五個核心方法，可以對cache對象的不同匹配進行不同的響應。
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提供調用的api，則頁面可以通過js調用flash去讀寫特定的磁盤目錄，達到本地數據緩存的目的。
註釋PS
- Web Storage / Web SQL Database / Indexed Database 的數據都存儲在瀏覽器對應的用戶配置文件目錄(user profile directory)下，以 Windows 7 爲例，Chrome 的數據存儲在”C:\Users\your-account-name\AppData\Local\Google\Chrome\User Data\Default\”下，而 Firefox 的數據存儲在”C:\Users\your-account-name\AppData\Local\Mozilla\Firefox\Profiles\”目錄下。
-
cookie文件存儲於documents and settings\userName\cookie\文件夾下。通常的命名格式爲：[email protected]。
-
較多的緩存機制目前主流瀏覽器並不兼容，不過可以使用polyfill的方法來處理