掌握緩存，再也不讓你藍瘦香菇

本文內容概要：

1 Web緩存是什麼？爲何要使用它？
2 Web緩存的類型
3 瀏覽器緩存的基本知識
3.1 Expires
3.2 Last-modified
3.3 Cache-Control
3.4 ETag
4 瀏覽器緩存機制
4.1 強緩存應用
4.2 協商緩存應用
4.3 強緩存與協商緩存的區別
5 瀏覽器緩存的流程
6 瀏覽器緩存的優化

1 Web緩存是什麼？爲何要使用它

Web緩存是介於服務器與客戶端之間。服務器多是源服務器（由於中間可能會有代理服務器），就是網站資源所在的服務器。客戶端指的是咱們的瀏覽器。Web緩存就是在服務器和客戶端之間搞監督，監督請求，並把請求的結果傳給瀏覽器顯示出來，另外存儲一份（咱們稱爲副本，也就是緩存）。而後，咱們下次請求相同的URL路徑，直接請求保存的副本（緩存），而不是再次向源服務器獲取數據。

緩存的好處：

優秀的緩存策略能夠縮短網頁請求資源的距離，從而減小延遲時間，而且因爲緩存文件能夠重複利用，還能夠減小帶寬，下降網絡負荷。

Tips：帶寬是指在單位時間（通常指的是1秒鐘）內能傳輸的數據量。網絡和高速公路相似，帶寬越大，就相似高速公路的車道越多，其同行能力越強。

歡迎溝通交流~HTML5學堂（碼匠）

2 Web緩存的類型

2.1 瀏覽器緩存

經過使用HTTP協議與服務器交互的時候，瀏覽器就會根據一套與服務器約定的規則進行緩存工做。

2.2 代理服務器緩存

代理服務器是瀏覽器和源服務器之間的中間服務器，瀏覽器先向這個中間服務器發起Web請求，通過處理後（好比權限驗證，緩存匹配等），再將請求轉發到源服務器。

2.3 數據庫緩存

當Web應用邏輯較爲複雜，頻繁進行數據庫查詢，很容易致使數據庫不堪重荷。爲了提升查詢的性能，將查詢後的數據放到內存中進行緩存，下次查詢時，直接從內存緩存直接返回，提升響應效率。

2.4 應用層緩存

經過代碼邏輯，把以前請求過的數據緩存起來，再次須要數據時經過邏輯上的處理選擇可用的緩存的數據。

今天咱們要給你們講解的是瀏覽器緩存，先來看看瀏覽器緩存的基本知識。

3 瀏覽器緩存的基本知識

瀏覽器的緩存狀態是由HTTP header決定的，header的參數有四種：Expires、Last-modified、Cache-Control、ETag；

3.1 Expires

緩存過時時間，用來指定資源到期的時間，是服務器端的具體的時間點，在響應http請求時告訴瀏覽器在過時時間前瀏覽器能夠直接從瀏覽器緩存取數據，而無需再次請求。

3.2 Last-modified

服務器端文件的最後修改時間，須要和Cache-Control共同使用，是檢查服務器端資源是否更新的一種方式。當瀏覽器再次進行請求時，會向服務器傳送If-Modified-Since報頭，詢問Last-Modified時間點以後資源是否被修改過。若是沒有修改，則返回碼爲304，使用緩存；若是修改過，則再次去服務器請求資源，返回碼和首次請求相同爲200，資源爲服務器最新資源。

3.3 Cache-Control

max-age（單位爲s）：指定設置緩存最大的有效時間，定義的是時間長短。好比Cache-Control:max-age=200表示文件在瀏覽器應該緩存且有效時長是200秒（從發出請求算起）。在接下來200秒內，若是有再次請求這個資源，瀏覽器不會向服務器發出HTTP請求，而是直接使用瀏覽器緩存下來的文件。

3.4 ETag

ETag和Last-Modified也是同樣的，是對文件進行標識的字段。不一樣的是，ETag是根據實體內容生成一段hash字符串，標識資源的狀態，由服務端產生。在向服務器查詢文件是否有更新時，瀏覽器經過If-None-Match字段把特徵字串（hash字符串）發送給服務器，由服務器和文件最新特徵字串進行匹配，來判斷文件是否有更新。沒有更新則返回304，有更新則返回200。ETag和Last-Modified可根據需求使用一個或兩個同時使用。兩個同時使用時，只要知足基中一個條件，就認爲文件沒有更新。

3.5 四種參數的對比

歡迎溝通交流~HTML5學堂（碼匠）

4 瀏覽器緩存機制

4.1 強緩存應用

1 瀏覽器第一次向服務器請求一個資源時，服務器返回這個資源的同時，在respone的header加上Expires的header；

2 瀏覽器在接收到這個資源後，會把這個資源連同全部response header一塊兒緩存下來（因此符合條件的緩存請求返回的header並非來自服務器，而是來自以前緩存的header）；

3 瀏覽器再請求這個資源時，先從緩存中尋找，找到這個資源後，拿出它的Expires跟當前的請求時間比較，若是請求時間在Expires指定的時間以前，就符合緩存要求，不然向服務器請求資源；

4 若是沒有符合緩存的要求，瀏覽器直接從服務器加載資源時，Expires Header在從新加載的時候會被更新；

Expires的一個缺點就是，返回的到期時間是服務器端的時間，這樣存在一個問題，若是客戶端的時間與服務器的時間相差很大（好比：客戶端的時間是2016.07.01 21:05.07，而服務器的時間是2016.07.12 12:15.07，緩存過時的時間是2016.07.23 20:05.07，這樣會產生延遲過時），那麼偏差就很大，另一個問題是，你很容易忘記給某內容設置了一個特定時間，若是返回內容的時候沒有更新這個過時時間（Expires），則每一個請求都是訪問到服務器，反而增長了負載和響應時間。因此在HTTP 1.1版開始，使用Cache-Control: max-age來進行替代。

注意：

max-age是根據它第一次的請求時間和Cache-Control設定的有效期，計算出一個資源過時時間，再拿這個過時時間跟當前的請求時間比較，若是請求時間在過時時間以前，就符合緩存要求，不然就不行。

Expires和Cache-Control同時存在時，Cache-Control優先級高於Expires；

強緩存一般都是針對靜態資源使用，動態資源須要慎用，除了服務端頁面能夠看做動態資源外，那些引用靜態資源的html也能夠看做是動態資源，若是這種html也被緩存，當這些html更新以後，可能就沒有機制可以通知瀏覽器這些html有更新，尤爲是先後端分離的應用裏，頁面都是純html頁面，每一個訪問地址可能都是直接訪問html頁面，這些頁面一般不增強緩存，以保證瀏覽器訪問這些頁面時始終請求服務器最新的資源。

4.2 協商緩存應用

1 瀏覽器第一次跟服務器請求一個資源，服務器在返回這個資源的同時，在respone的header加上Last-Modified的header，這個header表示這個資源在服務器上的最後修改時間；

2 瀏覽器再次向服務器請求這個資源時，在request的header上加上If-Modified-Since的header，這個header的值就是上一次請求時返回的Last-Modified的值；

3 服務器再次收到資源請求時，根據瀏覽器傳過來If-Modified-Since和資源在服務器上的最後修改時間判斷資源是否有變化，若是沒有變化則返回304 Not Modified，可是不會返回資源內容；若是有變化，就正常返回資源內容。當服務器返回304 Not Modified的響應時，response header中不會再添加Last-Modified的header，由於既然資源沒有變化，那麼Last-Modified也就不會改變，這是服務器返回304時的response header；

4 瀏覽器收到304的響應後，就會從緩存中加載資源；

5 若是不符合協商緩存要求，瀏覽器直接從服務器加載資源時，Last-Modified Header在從新加載的時候會被更新，下次請求時，If-Modified-Since會啓用上次返回的Last-Modified值。

Last-Modified和If-Modified-Since都是根據服務器時間返回的header，通常來講，在沒有調整服務器時間和篡改客戶端緩存的狀況下，這兩個header配合起來管理協商緩存是很是可靠的，可是有時候也會服務器上資源其實有變化，可是最後修改時間卻沒有變化的狀況，而這種問題又很不容易被定位出來，而當這種狀況出現的時候，就會影響協商緩存的可靠性。因此就有了另一對header來管理協商緩存，這對header就是ETag和If-None-Match。

1 瀏覽器第一次向服務器請求一個資源，服務器在返回這個資源的同時，在respone的header加上ETag的header，這個header是服務器根據當前請求的資源生成的一個惟一標識，這個惟一標識是一個字符串，只要資源有變化這個串就不一樣，跟最後修改時間沒有關係，因此能很好的補充Last-Modified的問題；

2 瀏覽器再次跟服務器請求這個資源時，在request的header上加上If-None-Match的header，這個header的值就是上一次請求時返回的ETag的值；

3 服務器再次收到資源請求時，根據瀏覽器傳過來If-None-Match和而後再根據資源生成一個新的ETag，若是這兩個值相同就說明資源沒有變化，不然就是有變化；若是沒有變化則返回304 Not Modified，可是不會返回資源內容；若是有變化，就正常返回資源內容。與Last-Modified不同的是，當服務器返回304 Not Modified的響應時，因爲ETag從新生成過，response header中還會把這個ETag返回，即便這個ETag跟以前的沒有變化；

4 瀏覽器收到304的響應後，就會從緩存中加載資源；

注意：

大部分Web服務器都默認開啓協商緩存，並且是同時啓用Last-Modified和If-Modified-Since、ETag和If-None-Match這也是爲了處理Last-Modified不可靠的狀況；

協商緩存須要配合強緩存使用，由於若是不啓用強緩存的話，協商緩存根本沒有意義；

4.3 強緩存與協商緩存的區別

共同點：若是符合條件，都是從客戶端緩存中加載資源，而不是從服務器加載資源數據；

不一樣點：強緩存不發送請求到服務器，協商緩存會發送請求到服務器；

5 瀏覽器緩存的流程

6 瀏覽器緩存的優化

Last-Modified 須要向服務器發起查詢請求，才能知道資源文件有沒有更新。雖然服務器可能返回304告訴沒有更新，但也還有一個請求的過程。對於移動網絡，這個請求多是比較耗時的。有一種說法叫「消滅304」，指的就是優化掉304的請求。

在實際應用中，爲了解決 Cache-Control 緩存時長很差設置的問題，以及爲了」消滅304「，Web前端採用的方式是：

1 在要緩存的資源文件名中加上文件MD5值字串，如 common.d5d02a02.css，同時設置 Cache-Control:max-age=31536000，也就是一年。在一年時間內，資源文件若是本地有緩存，就會使用緩存；也就不會有304的回包。

2 若是資源文件有修改，則更新文件內容，同時修改資源文件名，如 common.d5d02a02.cs，html頁面就會引用新的資源文件名。

學習資料：

1. 流雲諸葛
2. 張鑫旭-鑫空間-鑫生活
3. 大額大額哼歌等日落的博客
4. 騰訊全端 AlloyTeam 團隊 Blog

歡迎溝通交流~HTML5學堂（碼匠）