瀏覽器端的 9 種快取機制

ouven發表於2016-01-02
瀏覽器快取

瀏覽器快取（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 一起使用的。

四、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

五、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

六、sessionstorage

sessionStorage和localstorage類似，但是瀏覽器關閉則會全部刪除，api和localstorage相同，實際專案中使用較少。

七、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.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\資料夾下。通常的命名格式為：userName@domain.txt。

  • 較多的快取機制目前主流瀏覽器並不相容，不過可以使用polyfill的方法來處理

瀏覽器涉及的快取方式主要包含這些，具體結合自己的業務場景進行選擇使用

相關文章