簡述瀏覽器端的九大緩存_ZenDei技術網路在線

前言瀏覽器緩存是瀏覽器端保存數據用於快速讀取或避免重覆資源請求的優化機制，有效的緩存使用可以避免重覆的網路請求和瀏覽器快速地讀取本地數據，整體上加速網頁展示給用戶。瀏覽器端緩存的機制種類較多，總體歸納為九種，這裡詳細分析下這九種緩存機制的原理和使用場景。打開瀏覽器的調試模式——Applicatio ...

前言

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

一、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參數可以減少較多的瀏覽器請求。

二、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語句。

三、indexDB

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

IndexedDB 分別為同步和非同步訪問提供了單獨的 API 。同步 API 本來是要用於僅供 Web Workers 內部使用，但是還沒有被任何瀏覽器所實現。非同步 API 在 Web Workers 內部和外部都可以使用，另外瀏覽器可能對indexDB有50M大小的限制，一般用戶保存大量用戶數據並要求數據之間有搜索需要的場景。

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

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

六、sessionstorage

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

七、application cache

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

離線訪問對基於網路的應用而言越來越重要。雖然所有瀏覽器都有緩存機制，但它們並不可靠，也不一定總能起到預期的作用。HTML5 使用ApplicationCache 介面可以解決由離線帶來的部分難題。前提是你需要訪問的web頁面至少被線上訪問過一次。

使用緩存介面可為您的應用帶來以下三個優勢：

離線瀏覽 – 用戶可在離線時瀏覽您的完整網站。
速度 – 緩存資源為本地資源，因此載入速度較快。
伺服器負載更少 – 瀏覽器只會從發生了更改的伺服器下載資源。

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

九、flash緩存

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