簡述瀏覽器端的九大緩存

前言

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

 

webStorage分類
1、客戶端
　　　　H5存儲：
　　　　　　本地存儲：localStorage&SessionStorage
　　　　　　離線存儲：ApplicationCache
　　　　　　本地數據庫存儲：indexedDB、webSQL
　　　　H5以前：
　　　　　　本地存儲：Cookie、IE早期版本的專屬userData
2、服務端
Session Cookie、MySQL

 

1、http緩存

http緩存是基於HTTP協議的瀏覽器文件級緩存機制。即針對文件的重複請求狀況下，瀏覽器能夠根據協議頭判斷從服務器端請求文件仍是從本地讀取文件，chrome控制檯下的Network即展現的是瀏覽器的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參數能夠減小較多的瀏覽器請求。

 

2、WebSQL

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

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

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

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

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

var db = openDatabase('mydatabase', '2.0', my db',2*1024);
openDatabasek中五個參數分別爲：數據庫名、版本號、描述、數據庫大小、建立回調。建立回調沒有也能夠建立數據庫。

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

3、indexDB

IndexedDB 是一個爲了可以在客戶端存儲可觀數量的結構化數據，而且在這些數據上使用索引進行高性能檢索的 API。雖然 DOM 存儲，對於存儲少許數據是很是有用的，可是它對大量結構化數據的存儲就顯得力不從心了。IndexedDB 則提供了這樣的一個解決方案。

IndexedDB 分別爲同步和異步訪問提供了單獨的 API 。同步 API 原本是要用於僅供 Web Workers 內部使用，可是尚未被任何瀏覽器所實現。異步 API 在 Web Workers 內部和外部均可以使用，另外瀏覽器可能對indexDB有50M大小的限制，通常用戶保存大量用戶數據並要求數據之間有搜索須要的場景。

 

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的值。

 

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大小有限制，不適合存放過多的數據，若是數據存放超過最大限制會報錯，並移除最早保存的數據。

 

6、sessionstorage

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

 

7、application cache

application cahce是將大部分圖片資源、js、css等靜態資源放在manifest文件配置中。當頁面打開時經過manifest文件來讀取本地文件或是請求服務器文件。

離線訪問對基於網絡的應用而言愈來愈重要。雖然全部瀏覽器都有緩存機制，但它們並不可靠，也不必定總能起到預期的做用。HTML5 使用ApplicationCache 接口能夠解決由離線帶來的部分難題。前提是你須要訪問的web頁面至少被在線訪問過一次。

使用緩存接口可爲您的應用帶來如下三個優點：

• 離線瀏覽 – 用戶可在離線時瀏覽您的完整網站。
• 速度 – 緩存資源爲本地資源，所以加載速度較快。
• 服務器負載更少 – 瀏覽器只會從發生了更改的服務器下載資源。

 

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對象。

 

9、flash緩存

這種方式基本不用，這一方法主要基於flash有讀寫瀏覽器端本地目錄的功能，同時也能夠向js提供調用的api，則頁面能夠經過js調用flash去讀寫特定的磁盤目錄，達到本地數據緩存的目的。