摘要：私有緩存就是用戶專享的，各級代理不能緩存的緩存。代表使用內存中的緩存，則代表使用的是硬盤中的緩存，瀏覽器讀取緩存的順序為。

作為一名前端工作人員，前端的緩存知識是必須掌握的，因為一個網站打開網頁的速度直接關系到用戶體驗，用戶粘度，而提高網頁的打開速度有很多方面需要優化，其中比較重要的一點就是利用好緩存，緩存文件可以重復利用，還可以減少帶寬，降低網絡負荷。

緩存從宏觀上分為私有緩存和共享緩存，共享緩存就是那些能被各級代理緩存的緩存。私有緩存就是用戶專享的，各級代理不能緩存的緩存。

緩存從微觀上可以分為以下幾類：

瀏覽器緩存

代理服務器緩存

CDN緩存

數據庫緩存

應用層緩存

這里主要對瀏覽器的緩存進行說明：

不會向服務器發送請求，直接從緩存中讀取資源

請求返回200的狀態碼

在chrome控制臺的network選項中可以看到size顯示from disk cache或from memory cache。

from memory cache代表使用內存中的緩存，from disk cache則代表使用的是硬盤中的緩存，瀏覽器讀取緩存的順序為memory –> disk。在瀏覽器中，瀏覽器會在js和圖片等文件解析執行后直接存入內存緩存中，那么當刷新頁面時只需直接從內存緩存中讀取(from memory cache)；而css文件則會存入硬盤文件中，所以每次渲染頁面都需要從硬盤讀取緩存(from disk cache)。

Expires和Cache-Control兩者對比：其實這兩者差別不大，區別就在于 Expires 是http1.0的產物，Cache-Control是http1.1的產物，兩者同時存在的話，Cache-Control優先級高于Expires

協商緩存就是強制緩存失效后，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識決定是否使用緩存的過程

協商緩存生效，返回304和Not Modified

瀏覽器在第一次訪問資源時，服務器返回資源的同時，在response header中添加 Last-Modified的header，值是這個資源在服務器上的最后修改時間，瀏覽器接收后緩存文件和header；

瀏覽器下一次請求這個資源，瀏覽器檢測到有 Last-Modified這個header，于是添加If-Modified-Since這個header，值就是Last-Modified中的值；服務器再次收到這個資源請求，會根據 If-Modified-Since 中的值與服務器中這個資源的最后修改時間對比，如果沒有變化，返回304和空的響應體，直接從緩存讀取，如果If-Modified-Since的時間小于服務器中這個資源的最后修改時間，說明文件有更新，于是返回新的資源文件和200

缺點：1、某些服務端不能獲取精確的修改時間  2、文件修改時間改了，但文件內容卻沒有變

Etag是上一次加載資源時，服務器返回的response header，是對該資源的一種唯一標識，只要資源有變化，Etag就會重新生成。瀏覽器在下一次加載資源向服務器發送請求時，會將上一次返回的Etag值放到request header里的If-None-Match里，服務器只需要比較客戶端傳來的If-None-Match跟自己服務器上該資源的ETag是否一致，就能很好地判斷資源相對客戶端而言是否被修改過了。如果服務器發現ETag匹配不上，那么直接以常規GET 200回包形式將新的資源（當然也包括了新的ETag）發給客戶端；如果ETag是一致的，則直接返回304知會客戶端直接使用本地緩存即可。

首先在精確度上，Etag要優于Last-Modified，Last-Modified的時間單位是秒，如果某個文件在1秒內改變了多次，那么他們的Last-Modified其實并沒有體現出來修改，但是Etag每次都會改變確保了精度；如果是負載均衡的服務器，各個服務器生成的Last-Modified也有可能不一致。

性能上，Etag要遜于Last-Modified，畢竟Last-Modified只需要記錄時間，而Etag需要服務器通過算法來計算出一個hash值。

優先級上，服務器校驗優先考慮Etag

appcache優先于強緩存，強制緩存優先于協商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協商緩存由服務器決定是否使用緩存，若協商緩存失效，那么代表該請求的緩存失效，返回200，重新返回資源和緩存標識，再存入瀏覽器緩存中；生效則返回304，繼續使用緩存。具體流程看下圖：

不管是瀏覽器緩存，還是代理服務器緩存，CDN緩存都遵循客戶端與服務端之間的緩存機制

本地存儲主要有以下幾種，localStorage，sessionStorage和cookie，WebSql和IndexDB主要用在前端有大容量存儲需求的頁面上，例如，在線編輯瀏覽器或者網頁郵箱。他們都可以將數據存儲在瀏覽器，應該根據不同的場景進行使用。

Cookie主要是由服務器生成，且前端也可以設置，保存在客戶端本地的一個文件，通過response響應頭的set-Cookie字段進行設置，且Cookie的內容自動在請求的時候被傳遞給服務器。如下：

[HTTP/1.1 200 OK]
Server:[bfe/1.0.8.18]
Etag:["58860415-98b"]
Cache-Control:[private, no-cache, no-store, proxy-revalidate, no-transform]
Connection:[Keep-Alive]
Set-Cookie:[BDORZ=27315; max-age=86400; domain=.baidu.com; path=/]
Pragma:[no-cache]
Last-Modified:[Mon, 23 Jan 2017 13:24:37 GMT]
Content-Length:[2443]
Date:[Mon, 09 Apr 2018 09:59:06 GMT]
Content-Type:[text/html]

Cookie包含的信息：
它可以記錄你的用戶ID、密碼、瀏覽過的網頁、停留的時間等信息。當你再次來到該網站時，網站通過讀取Cookies，得知你的相關信息，就可以做出相應的動作，如在頁面顯示歡迎你的標語，或者讓你不用輸入ID、密碼就直接登錄等等。一個網站只能讀取它自己放置的信息，不能讀取其他網站的Cookie文件。因此，Cookie文件還保存了host屬性，即網站的域名或ip。
這些屬性以名值對的方式進行保存，為了安全，它的內容大多進行了加密處理。Cookie文件的命名格式是：用戶名@網站地址[數字].txt

Cookie的優點：

給用戶更人性化的使用體驗，如記住“密碼功能”、老用戶登錄歡迎語

彌補了HTTP無連接特性

站點統計訪問人數的一個依據

Cookie的缺點：

它無法解決多人共用一臺電腦的問題，帶來了不安全因素

Cookie文件容易被誤刪除

一人使用多臺電腦

Cookies欺騙。修改host文件，可以非法訪問目標站點的Cookie

容量有限制，不能超過4kb

在請求頭上帶著數據安全性差

localStorage主要是前端開發人員，在前端設置，一旦數據保存在本地后，就可以避免再向服務器請求數據，因此減少不必要的數據請求，減少數據在瀏覽器和服務器間不必要地來回傳遞。

可以長期存儲數據，沒有時間限制，一天，一年，兩年甚至更長，數據都可以使用。
localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中localStorage會有所不同

優點：

localStorage拓展了cookie的4k限制

localStorage可以將第一次請求的5M大小數據直接存儲到本地，相比于cookie可以節約帶寬

localStorage的使用也是遵循同源策略的，所以不同的網站直接是不能共用相同的localStorage

缺點：

需要手動刪除，否則長期存在

瀏覽器大小不一，版本的支持也不一樣

localStorage只支持string類型的存儲，JSON對象需要轉換

localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡

sessionStorage主要是前端開發人員，在前端設置，sessionStorage（會話存儲），只有在瀏覽器被關閉之前使用，創建另一個頁面時同意可以使用，關閉瀏覽器之后數據就會消失

存儲上限限制：不同的瀏覽器存儲的上限也不一樣，但大多數瀏覽器把上限限制在5MB以下

Web SQL 是在瀏覽器上模擬數據庫，可以使用JS來操作SQL完成對數據的讀寫。它使用 SQL 來操縱客戶端數據庫的 API，這些 API 是異步的，規范中使用的方言是SQLlite。數據庫還是在服務端，不建議使用，已廢棄

隨著瀏覽器的功能不斷增強，越來越多的網站開始考慮，將大量數據儲存在客戶端，這樣可以減少從服務器獲取數據，直接從本地獲取數據。

現有的瀏覽器數據儲存方案，都不適合儲存大量數據：Cookie 的大小不超過4KB，且每次請求都會發送回服務器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不同），而且不提供搜索功能，不能建立自定義的索引。所以，需要一種新的解決方案，這就是 IndexedDB 誕生的背景。

通俗地說，IndexedDB 就是瀏覽器提供的本地數據庫，它可以被網頁腳本創建和操作。IndexedDB 允許儲存大量數據，提供查找接口，還能建立索引。這些都是 LocalStorage 所不具備的。就數據庫類型而言，IndexedDB 不屬于關系型數據庫（不支持 SQL 查詢語句），更接近 NoSQL 數據庫。

關于indexDB的知識可以查看這篇文章http://www.ruanyifeng.com/blo...

這里，我只是根據自己的理解整理了一下關于緩存，存儲方面的知識，還有很多不足的地方，更多實踐的知識，還請查看其他文章，如有錯誤，請指出

參考文章：
https://www.jianshu.com/p/54c...
https://segmentfault.com/a/11...
http://www.cnblogs.com/etoah/...
https://blog.csdn.net/zhouche...