摘要：數(shù)據(jù)庫緩存當應(yīng)用邏輯較為復(fù)雜，頻繁進行數(shù)據(jù)庫查詢，很容易導(dǎo)致數(shù)據(jù)庫不堪重荷。單位為指定設(shè)置緩存最大的有效時間，定義的是時間長短。

1 Web緩存是什么？為什么要使用它？
2 Web緩存的類型
3 瀏覽器緩存的基本知識
3.1 Expires
3.2 Last-modified
3.3 Cache-Control
3.4 ETag
4 瀏覽器緩存機制
4.1 強緩存應(yīng)用
4.2 協(xié)商緩存應(yīng)用
4.3 強緩存與協(xié)商緩存的區(qū)別
5 瀏覽器緩存的流程
6 瀏覽器緩存的優(yōu)化

Web緩存是介于服務(wù)器與客戶端之間。服務(wù)器可能是源服務(wù)器（因為中間可能會有代理服務(wù)器），就是網(wǎng)站資源所在的服務(wù)器?？蛻舳酥傅氖俏覀兊臑g覽器。Web緩存就是在服務(wù)器和客戶端之間搞監(jiān)督，監(jiān)督請求，并把請求的結(jié)果傳給瀏覽器顯示出來，另外存儲一份（我們稱為副本，也就是緩存）。然后，我們下次請求相同的URL路徑，直接請求保存的副本（緩存），而不是再次向源服務(wù)器獲取數(shù)據(jù)。

緩存的好處：

優(yōu)秀的緩存策略可以縮短網(wǎng)頁請求資源的距離，從而減少延遲時間，并且由于緩存文件可以重復(fù)利用，還可以減少帶寬，降低網(wǎng)絡(luò)負荷。

Tips：帶寬是指在單位時間（一般指的是1秒鐘）內(nèi)能傳輸?shù)臄?shù)據(jù)量。網(wǎng)絡(luò)和高速公路類似，帶寬越大，就類似高速公路的車道越多，其同行能力越強。

歡迎溝通交流~HTML5學(xué)堂（碼匠）

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

代理服務(wù)器是瀏覽器和源服務(wù)器之間的中間服務(wù)器，瀏覽器先向這個中間服務(wù)器發(fā)起Web請求，經(jīng)過處理后（比如權(quán)限驗證，緩存匹配等），再將請求轉(zhuǎn)發(fā)到源服務(wù)器。

當Web應(yīng)用邏輯較為復(fù)雜，頻繁進行數(shù)據(jù)庫查詢，很容易導(dǎo)致數(shù)據(jù)庫不堪重荷。為了提高查詢的性能，將查詢后的數(shù)據(jù)放到內(nèi)存中進行緩存，下次查詢時，直接從內(nèi)存緩存直接返回，提高響應(yīng)效率。

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

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

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

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

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

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

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

歡迎溝通交流~HTML5學(xué)堂（碼匠）

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

2 瀏覽器在接收到這個資源后，會把這個資源連同所有response header一起緩存下來（所以符合條件的緩存請求返回的header并不是來自服務(wù)器，而是來自之前緩存的header）；

3 瀏覽器再請求這個資源時，先從緩存中尋找，找到這個資源后，拿出它的Expires跟當前的請求時間比較，如果請求時間在Expires指定的時間之前，就符合緩存要求，否則向服務(wù)器請求資源；

4 如果沒有符合緩存的要求，瀏覽器直接從服務(wù)器加載資源時，Expires Header在重新加載的時候會被更新；

Expires的一個缺點就是，返回的到期時間是服務(wù)器端的時間，這樣存在一個問題，如果客戶端的時間與服務(wù)器的時間相差很大（比如：客戶端的時間是2016.07.01 21:05.07，而服務(wù)器的時間是2016.07.12 12:15.07，緩存過期的時間是2016.07.23 20:05.07，這樣會產(chǎn)生延遲過期），那么誤差就很大，另外一個問題是，你很容易忘記給某內(nèi)容設(shè)置了一個特定時間，如果返回內(nèi)容的時候沒有更新這個過期時間（Expires），則每個請求都是訪問到服務(wù)器，反而增加了負載和響應(yīng)時間。所以在HTTP 1.1版開始，使用Cache-Control: max-age來進行替代。

注意：

max-age是根據(jù)它第一次的請求時間和Cache-Control設(shè)定的有效期，計算出一個資源過期時間，再拿這個過期時間跟當前的請求時間比較，如果請求時間在過期時間之前，就符合緩存要求，否則就不行。

Expires和Cache-Control同時存在時，Cache-Control優(yōu)先級高于Expires；

強緩存通常都是針對靜態(tài)資源使用，動態(tài)資源需要慎用，除了服務(wù)端頁面可以看作動態(tài)資源外，那些引用靜態(tài)資源的html也可以看作是動態(tài)資源，如果這種html也被緩存，當這些html更新之后，可能就沒有機制能夠通知瀏覽器這些html有更新，尤其是前后端分離的應(yīng)用里，頁面都是純html頁面，每個訪問地址可能都是直接訪問html頁面，這些頁面通常不加強緩存，以保證瀏覽器訪問這些頁面時始終請求服務(wù)器最新的資源。

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

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

3 服務(wù)器再次收到資源請求時，根據(jù)瀏覽器傳過來If-Modified-Since和資源在服務(wù)器上的最后修改時間判斷資源是否有變化，如果沒有變化則返回304 Not Modified，但是不會返回資源內(nèi)容；如果有變化，就正常返回資源內(nèi)容。當服務(wù)器返回304 Not Modified的響應(yīng)時，response header中不會再添加Last-Modified的header，因為既然資源沒有變化，那么Last-Modified也就不會改變，這是服務(wù)器返回304時的response header；

4 瀏覽器收到304的響應(yīng)后，就會從緩存中加載資源；

5 如果不符合協(xié)商緩存要求，瀏覽器直接從服務(wù)器加載資源時，Last-Modified Header在重新加載的時候會被更新，下次請求時，If-Modified-Since會啟用上次返回的Last-Modified值。

Last-Modified和If-Modified-Since都是根據(jù)服務(wù)器時間返回的header，一般來說，在沒有調(diào)整服務(wù)器時間和篡改客戶端緩存的情況下，這兩個header配合起來管理協(xié)商緩存是非常可靠的，但是有時候也會服務(wù)器上資源其實有變化，但是最后修改時間卻沒有變化的情況，而這種問題又很不容易被定位出來，而當這種情況出現(xiàn)的時候，就會影響協(xié)商緩存的可靠性。所以就有了另外一對header來管理協(xié)商緩存，這對header就是ETag和If-None-Match。

1 瀏覽器第一次向服務(wù)器請求一個資源，服務(wù)器在返回這個資源的同時，在respone的header加上ETag的header，這個header是服務(wù)器根據(jù)當前請求的資源生成的一個唯一標識，這個唯一標識是一個字符串，只要資源有變化這個串就不同，跟最后修改時間沒有關(guān)系，所以能很好的補充Last-Modified的問題；

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

3 服務(wù)器再次收到資源請求時，根據(jù)瀏覽器傳過來If-None-Match和然后再根據(jù)資源生成一個新的ETag，如果這兩個值相同就說明資源沒有變化，否則就是有變化；如果沒有變化則返回304 Not Modified，但是不會返回資源內(nèi)容；如果有變化，就正常返回資源內(nèi)容。與Last-Modified不一樣的是，當服務(wù)器返回304 Not Modified的響應(yīng)時，由于ETag重新生成過，response header中還會把這個ETag返回，即使這個ETag跟之前的沒有變化；

4 瀏覽器收到304的響應(yīng)后，就會從緩存中加載資源；

注意：

大部分Web服務(wù)器都默認開啟協(xié)商緩存，而且是同時啟用Last-Modified和If-Modified-Since、ETag和If-None-Match這也是為了處理Last-Modified不可靠的情況；

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

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

不同點：強緩存不發(fā)送請求到服務(wù)器，協(xié)商緩存會發(fā)送請求到服務(wù)器；

Last-Modified 需要向服務(wù)器發(fā)起查詢請求，才能知道資源文件有沒有更新。雖然服務(wù)器可能返回304告訴沒有更新，但也還有一個請求的過程。對于移動網(wǎng)絡(luò)，這個請求可能是比較耗時的。有一種說法叫“消滅304”，指的就是優(yōu)化掉304的請求。

在實際應(yīng)用中，為了解決 Cache-Control 緩存時長不好設(shè)置的問題，以及為了”消滅304“，Web前端采用的方式是：

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

2 如果資源文件有修改，則更新文件內(nèi)容，同時修改資源文件名，如 common.d5d02a02.cs，html頁面就會引用新的資源文件名。

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

歡迎溝通交流~HTML5學(xué)堂（碼匠）