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

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

Web緩存是介于服務(wù)器與客戶端之間。服務(wù)器可能是源服務(wù)器（因?yàn)橹虚g可能會(huì)有代理服務(wù)器），就是網(wǎng)站資源所在的服務(wù)器。客戶端指的是我們的瀏覽器。Web緩存就是在服務(wù)器和客戶端之間搞監(jiān)督，監(jiān)督請(qǐng)求，并把請(qǐng)求的結(jié)果傳給瀏覽器顯示出來(lái)，另外存儲(chǔ)一份（我們稱為副本，也就是緩存）。然后，我們下次請(qǐng)求相同的URL路徑，直接請(qǐng)求保存的副本（緩存），而不是再次向源服務(wù)器獲取數(shù)據(jù)。

緩存的好處：

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

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

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

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

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

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

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

今天我們要給大家講解的是瀏覽器緩存，先來(lái)看看瀏覽器緩存的基本知識(shí)。

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

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

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

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

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

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

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

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

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

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

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

注意：

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

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

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

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

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

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

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

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

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

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

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

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

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

注意：

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

協(xié)商緩存需要配合強(qiáng)緩存使用，因?yàn)槿绻粏⒂脧?qiáng)緩存的話，協(xié)商緩存根本沒有意義；

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

不同點(diǎn)：強(qiáng)緩存不發(fā)送請(qǐng)求到服務(wù)器，協(xié)商緩存會(huì)發(fā)送請(qǐng)求到服務(wù)器；

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

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

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

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

流云諸葛
張?chǎng)涡?鑫空間-鑫生活
大額大額哼歌等日落的博客
騰訊全端 AlloyTeam 團(tuán)隊(duì) Blog

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