摘要：數據庫緩存當應用邏輯較為復雜，頻繁進行數據庫查詢，很容易導致數據庫不堪重荷。單位為指定設置緩存最大的有效時間，定義的是時間長短。

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 瀏覽器緩存的優化

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

緩存的好處：

優秀的緩存策略可以縮短網頁請求資源的距離，從而減少延遲時間，并且由于緩存文件可以重復利用，還可以減少帶寬，降低網絡負荷。

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

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

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

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

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

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

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

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

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

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

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

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

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

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頁面，這些頁面通常不加強緩存，以保證瀏覽器訪問這些頁面時始終請求服務器最新的資源。

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不可靠的情況；

協商緩存需要配合強緩存使用，因為如果不啟用強緩存的話，協商緩存根本沒有意義；

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

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

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頁面就會引用新的資源文件名。

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

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