瀏覽器緩存是瀏覽器端保存數據用於快速讀取或避免重複資源請求的優化機制,有效的緩存使用能夠避免重複的網絡請求和瀏覽器快速地讀取本地數據,總體上加速網頁展現給用戶。瀏覽器端緩存的機制種類較多,整體概括爲九種,這裏詳細分析下這九種緩存機制的原理和使用場景。打開瀏覽器的調試模式->resources左側就有瀏覽器的8種緩存機制。css
1、http緩存html
http緩存是基於HTTP協議的瀏覽器文件級緩存機制。即針對文件的重複請求狀況下,瀏覽器能夠根據協議頭判斷從服務器端請求文件仍是從本地讀取文件,chrome控制檯下的Frames即展現的是瀏覽器的http文件級緩存。如下是瀏覽器緩存的整個機制流程。主要是針對重複的http請求,在有緩存的狀況下判斷過程主要分3步:html5
◆判斷expires,若是未過時,直接讀取http緩存文件,不發http請求,不然進入下一步。jquery
◆判斷是否含有etag,有則帶上if-none-match發送請求,未修改返回304,修改返回200,不然進入下一步。git
◆判斷是否含有last-modified,有則帶上if-modified-since發送請求,無效返回200,有效返回304,不然直接向服務器請求。 github
若是經過etag和last-modified判斷,即便返回304有至少有一次http請求,只不過返回的是304的返回內容,而不是文件內容。因此合理設計實現expires參數能夠減小較多的瀏覽器請求。web
瀏覽器緩存機制,其實主要就是HTTP協議定義的緩存機制(如: Expires; Cache-control等)。可是也有非HTTP協議定義的緩存機制,如使用HTML Meta 標籤,Web開發者能夠在HTML頁面的<head>節點中加入<meta>標籤,代碼以下:ajax
html codesql |
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">chrome |
上述代碼的做用是告訴瀏覽器當前頁面不被緩存,每次訪問都須要去服務器拉取。使用上很簡單,但只有部分瀏覽器能夠支持,並且全部緩存代理服務器都不支持,由於代理不解析HTML內容自己。
下面我主要介紹HTTP協議定義的緩存機制。
Expires是Web服務器響應消息頭字段,在響應http請求時告訴瀏覽器在過時時間前瀏覽器能夠直接從瀏覽器緩存取數據,而無需再次請求。
下面是寶寶PK項目中,瀏覽器拉取jquery.js web服務器的響應頭:
注:Date頭域表示消息發送的時間,時間的描述格式由rfc822定義。例如,Date: Mon,31 Dec 2001 04:25:57GMT。
Web服務器告訴瀏覽器在2012-11-28 03:30:01這個時間點以前,可使用緩存文件。發送請求的時間是2012-11-28 03:25:01,即緩存5分鐘。
不過Expires 是HTTP 1.0的東西,如今默認瀏覽器均默認使用HTTP 1.1,因此它的做用基本忽略。
Cache-Control與Expires的做用一致,都是指明當前資源的有效期,控制瀏覽器是否直接從瀏覽器緩存取數據仍是從新發請求到服務器取數據。只不過Cache-Control的選擇更多,設置更細緻,若是同時設置的話,其優先級高於Expires。
http協議頭Cache-Control : |
值能夠是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age 各個消息中的指令含義以下:
|
仍是上面那個請求,web服務器返回的Cache-Control頭的值爲max-age=300,即5分鐘(和上面的Expires時間一致,這個不是必須的)。
Last-Modified/If-Modified-Since要配合Cache-Control使用。
l Last-Modified:標示這個響應資源的最後修改時間。web服務器在響應請求時,告訴瀏覽器資源的最後修改時間。
l If-Modified-Since:當資源過時時(使用Cache-Control標識的max-age),發現資源具備Last-Modified聲明,則再次向web服務器請求時帶上頭 If-Modified-Since,表示請求時間。web服務器收到請求後發現有頭If-Modified-Since 則與被請求資源的最後修改時間進行比對。若最後修改時間較新,說明資源又被改動過,則響應整片資源內容(寫在響應消息包體內),HTTP 200;若最後修改時間較舊,說明資源無新修改,則響應HTTP 304 (無需包體,節省瀏覽),告知瀏覽器繼續使用所保存的cache。
Etag/If-None-Match也要配合Cache-Control使用。
l Etag:web服務器響應請求時,告訴瀏覽器當前資源在服務器的惟一標識(生成規則由服務器以爲)。Apache中,ETag的值,默認是對文件的索引節(INode),大小(Size)和最後修改時間(MTime)進行Hash後獲得的。
l If-None-Match:當資源過時時(使用Cache-Control標識的max-age),發現資源具備Etage聲明,則再次向web服務器請求時帶上頭If-None-Match (Etag的值)。web服務器收到請求後發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對,決定返回200或304。
你可能會以爲使用Last-Modified已經足以讓瀏覽器知道本地的緩存副本是否足夠新,爲何還須要Etag(實體標識)呢?HTTP1.1中Etag的出現主要是爲了解決幾個Last-Modified比較難解決的問題:
l Last-Modified標註的最後修改只能精確到秒級,若是某些文件在1秒鐘之內,被修改屢次的話,它將不能準確標註文件的修改時間
l 若是某些文件會被按期生成,當有時內容並無任何變化,但Last-Modified卻改變了,致使文件無法使用緩存
l 有可能存在服務器沒有準確獲取文件修改時間,或者與代理服務器時間不一致等情形
Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的惟一標識符,可以更加準確的控制緩存。Last-Modified與ETag是能夠一塊兒使用的,服務器會優先驗證ETag,一致的狀況下,纔會繼續比對Last-Modified,最後才決定是否返回304。
瀏覽器緩存行爲還有用戶的行爲有關!!!
用戶操做 |
Expires/Cache-Control |
Last-Modified/Etag |
地址欄回車 |
有效 |
有效 |
頁面連接跳轉 |
有效 |
有效 |
新開窗口 |
有效 |
有效 |
前進、後退 |
有效 |
有效 |
F5刷新 |
無效 |
有效 |
Ctrl+F5刷新 |
無效 |
無效 |
瀏覽器第一次請求:
瀏覽器再次請求時:
2、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); });3、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
4、cookie
Cookie(或者Cookies),指通常網站爲了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據(一般通過加密)。cookie通常經過http請求中在頭部一塊兒發送到服務器端。一條cookie記錄主要由鍵、值、域、過時時間、大小組成,通常用戶保存用戶的認證信息。cookie最大長度和域名個數由不一樣瀏覽器決定,具體以下:
瀏覽器 支持域名個數 最大長度 IE7以上 50個 4095B Firefox 50個 4097B Opera 30個 4096B Safari/WebKit 無限制 4097B不一樣域名之間的cookie信息是獨立的,若是須要設置共享能夠在服務器端設置cookie的path和domain來實現共享。瀏覽器端也能夠經過document.cookie來獲取cookie,並經過js瀏覽器端也能夠方便地讀取/設置cookie的值。
https://github.com/component/cookie/blob/master/index.js
5、localstorage
localStorage是html5的一種新的本地緩存方案,目前用的比較多,通常用來存儲ajax返回的數據,加快下次頁面打開時的渲染速度。
瀏覽器 最大長度 IE9以上 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
6、sessionstorage
sessionStorage和localstorage相似,可是瀏覽器關閉則會所有刪除,api和localstorage相同,實際項目中使用較少。
7、application cache
application cahce是將大部分圖片資源、js、css等靜態資源放在manifest文件配置中。當頁面打開時經過manifest文件來讀取本地文件或是請求服務器文件。
離線訪問對基於網絡的應用而言愈來愈重要。雖然全部瀏覽器都有緩存機制,但它們並不可靠,也不必定總能起到預期的做用。HTML5 使用ApplicationCache 接口能夠解決由離線帶來的部分難題。前提是你須要訪問的web頁面至少被在線訪問過一次。
使用緩存接口可爲您的應用帶來如下三個優點:
◆離線瀏覽 – 用戶可在離線時瀏覽您的完整網站。
◆速度 – 緩存資源爲本地資源,所以加載速度較快。
◆服務器負載更少 – 瀏覽器只會從發生了更改的服務器下載資源。
一個簡單的離線頁面主要包含如下幾個部分:
index.html
<htmlmanifest="clock.manifest"> <head> <title>AppCache Test</title> <linkrel="stylesheet"href="clock.css"> <script src="clock.js"></script> </head> <body> <p><outputid="clock"></output></p> <divid="log"></div> </body> </html>clock.manifest
CACHE MANIFEST #VERSION 1.0 CACHE: clock.css clock.jsclock.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文件來控制其它文件更新的。
8、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
9、flash緩存
這種方式基本不用,這一方法主要基於flash有讀寫瀏覽器端本地目錄的功能,同時也能夠向js提供調用的api,則頁面能夠經過js調用flash去讀寫特定的磁盤目錄,達到本地數據緩存的目的。
註釋PS
◆Web Storage / Web SQL Database / Indexed Database 的數據都存儲在瀏覽器對應的用戶配置文件目錄(user profile directory)下,以 Windows 7 爲例,Chrome 的數據存儲在」C:Usersyour-account-nameAppDataLocalGoogleChromeUser DataDefault」下,而 Firefox 的數據存儲在」C:Usersyour-account-nameAppDataLocalMozillaFirefoxProfiles」目錄下。
◆cookie文件存儲於documents and settingsuserNamecookie文件夾下。一般的命名格式爲:userName@domain.txt。
◆較多的緩存機制目前主流瀏覽器並不兼容,不過可使用polyfill的方法來處理。
瀏覽器涉及的緩存方式主要包含這些,具體結合本身的業務場景進行選擇使用。