9中瀏覽器端緩存

時間 2019-12-20

原文原文鏈接

瀏覽器緩存（Browser Caching）是瀏覽器端保存數據用於快速讀取或避免重複資源請求的優化機制，有效的緩存使用能夠避免重複的網絡請求和瀏覽器快速地讀取本地數據，總體上加速網頁展現給用戶。瀏覽器端緩存的機制種類較多，整體概括爲九種，這裏詳細分析下這九種緩存機制的原理和使用場景。打開瀏覽器的調試模式->resources左側就有瀏覽器的8種緩存機制。javascript

1、http緩存

http緩存是基於HTTP協議的瀏覽器文件級緩存機制。即針對文件的重複請求狀況下，瀏覽器能夠根據協議頭判斷從服務器端請求文件仍是從本地讀取文件，chrome控制檯下的Frames即展現的是瀏覽器的http文件級緩存。如下是瀏覽器緩存的整個機制流程。主要是針對重複的http請求，在有緩存的狀況下判斷過程主要分3步：css

判斷expires，若是未過時，直接讀取http緩存文件，不發http請求，不然進入下一步
判斷是否含有etag，有則帶上if-none-match發送請求，未修改返回304，修改返回200，不然進入下一步
判斷是否含有last-modified，有則帶上if-modified-since發送請求，無效返回200，有效返回304（未修改——Not Modified），不然直接向服務器請求

若是經過etag和last-modified判斷，即便返回304有至少有一次http請求，只不過返回的是304的返回內容，而不是文件內容。因此合理設計實現expires參數能夠減小較多的瀏覽器請求。html

2、websql

websql這種方式只有較新的chrome瀏覽器支持，並以一個獨立規範形式出現，主要有如下特色html5

Web Sql 數據庫API 實際上不是HTML5規範的組成部分；
在HTML5以前就已經存在了，是單獨的規範；
它是將數據以數據庫的形式存儲在客戶端，根據需求去讀取；
跟Storage的區別是： Storage和Cookie都是以鍵值對的形式存在的；
Web Sql 更方便於檢索，容許sql語句查詢；
讓瀏覽器實現小型數據庫存儲功能；
這個數據庫是集成在瀏覽器裏面的，目前主流瀏覽器基本都已支持；

websql API主要包含三個核心方法：java

openDatabase : 這個方法使用現有數據庫或建立新數據庫建立數據庫對象。
transaction : 這個方法容許咱們根據狀況控制事務提交或回滾。
executeSql : 這個方法用於執行真實的SQL查詢。

openDatabase方法能夠打開已經存在的數據庫，不存在則建立git

var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);

openDatabasek中五個參數分別爲：數據庫名、版本號、描述、數據庫大小、建立回調。建立回調沒有也能夠建立數據庫。github

database.transaction() 函數用來查詢，executeSql()用於執行sql語句web

例如在mydatabase數據庫中建立表t1：ajax

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)');      });

插入操做sql

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返回的數據，加快下次頁面打開時的渲染速度。

瀏覽器	最大長度
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

6、sessionstorage

sessionStorage和localstorage相似，可是瀏覽器關閉則會所有刪除，api和localstorage相同，實際項目中使用較少。

7、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文件來控制其它文件更新的。

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的方法來處理

瀏覽器涉及的緩存方式主要包含這些，具體結合本身的業務場景進行選擇使用