前言

之前看完了李智慧老師著的《大型網(wǎng)站技術(shù)架構(gòu)-核心原理與案例分析》這本書(shū)，書(shū)中多次提起瀏覽器緩存的話題，恰是這幾天生產(chǎn)又遇到了一個(gè)與緩存的問(wèn)題，發(fā)現(xiàn)自己書(shū)是沒(méi)少看，正經(jīng)走心的內(nèi)容卻不多，這次就借著工作中遇到的問(wèn)題，一并把與網(wǎng)頁(yè)緩存相關(guān)的HTTP頭部信息總結(jié)一番，一來(lái)總結(jié)給自己看，以便后期查閱；二來(lái)把自己的想法和園中朋友分享，互相指點(diǎn)，如此，豈不妙哉?。。?/p>

簡(jiǎn)單的總結(jié)來(lái)說(shuō)，在HTTP中與網(wǎng)頁(yè)緩存相關(guān)的HTTP頭部信息分為以下三組：

• Last-Modified和If-Modified-Since
• ETags和If-None-Match
• Expires和Cache-Control

下面就分別對(duì)這三組HTTP頭進(jìn)行詳細(xì)的說(shuō)明和總結(jié)！

Last-Modified和If-Modified-Since

在HTTP中Last-Modified與If-Modified-Since都是用于記錄頁(yè)面最后修改時(shí)間的HTTP頭信息，二者的區(qū)別如下：

• Last-Modified是由服務(wù)器往客戶端發(fā)送的HTTP頭；
• If-Modified-Since是由客戶端往服務(wù)器發(fā)送的頭。

所以，請(qǐng)牢牢記住上述基本知識(shí)點(diǎn)，這樣才能工作中分析請(qǐng)求包時(shí)不會(huì)暈頭轉(zhuǎn)向。

如上圖所示，用戶通過(guò)瀏覽器第一次請(qǐng)求相關(guān)網(wǎng)頁(yè)時(shí)，服務(wù)器會(huì)返回一個(gè)Last-Modified:Mon, 26 Apr 2019 13:22:17 GMT這樣的請(qǐng)求頭；當(dāng)用戶再次訪問(wèn)對(duì)應(yīng)的網(wǎng)頁(yè)時(shí)，瀏覽器會(huì)將服務(wù)器響應(yīng)的Last-Modified值賦給If-Modified-Since，接下來(lái)，瀏覽器會(huì)帶著If-Modified-Since:Mon, 26 Apr 2019 13:22:17 GMT這樣的請(qǐng)求頭去訪問(wèn)服務(wù)器應(yīng)用。服務(wù)器收到請(qǐng)求后，會(huì)將這個(gè)對(duì)應(yīng)網(wǎng)頁(yè)的更新時(shí)間與If-Modified-Since進(jìn)行比對(duì)以決定是返回304重定向碼還是200成功碼。

ETags和If-None-Match

通過(guò)上面的總結(jié)，我們知道Last-Modified和If-Modified-Since只能判斷資源的最后修改時(shí)間，以此來(lái)決定是否使用緩存。而ETags和If-None-Match則比較更高級(jí)一點(diǎn)。通過(guò)ETags和If-None-Match，我們可以對(duì)資源的任何屬性進(jìn)行判斷，以此判斷是否使用緩存。同樣的，我們也需要記住ETags和If-None-Match的兩個(gè)知識(shí)點(diǎn)：

• ETags是由服務(wù)器往客戶端發(fā)送的HTTP頭；
• If-None-Match是由客戶端往服務(wù)器發(fā)送的頭。

請(qǐng)求邏輯與Last-Modified和If-Modified-Since大致一樣，不同之處就是在服務(wù)器端的判斷。比如有些特定的場(chǎng)合下，一些靜態(tài)的文件，可能會(huì)被頻繁的更新，但是文件內(nèi)容沒(méi)有變化，這時(shí)候如果使用Last-modified，服務(wù)器端始終返回最新的內(nèi)容給瀏覽器，而Etag是根據(jù)文件內(nèi)容來(lái)的，如果內(nèi)容沒(méi)有變化的話，始終會(huì)讓瀏覽器使用本地緩存的文件。所以，使使用ETag可以更好的避免一些不必要的服務(wù)器相應(yīng)。

Expires和Cache-Control

添加Expires頭能有效的利用瀏覽器的緩存能力來(lái)改善頁(yè)面的性能，能在后續(xù)的頁(yè)面中有效避免很多不必要的HTTP請(qǐng)求，WEB服務(wù)器使用Expires頭來(lái)告訴Web客戶端它可以使用一個(gè)組件的當(dāng)前副本，直到指定的時(shí)間為止。例如：Expires：Thu，15 Apr 2019 20：00：00 GMT;這個(gè)告訴瀏覽器緩存有效性持續(xù)到2019年4月15日為止，在這個(gè)時(shí)間之內(nèi)相同的請(qǐng)求使用緩存，這個(gè)時(shí)間之外使用HTTP請(qǐng)求。與上面說(shuō)到的Last-Modified和If-Modified-Since和ETags和If-None-Match相比，是能夠節(jié)省一點(diǎn)帶寬的，因?yàn)榭赡軙?huì)少發(fā)一次HTTP請(qǐng)求。

但是Expires有一個(gè)明顯的缺點(diǎn)；由于返回的到期時(shí)間是服務(wù)器端的時(shí)間，這樣存在一個(gè)問(wèn)題，如果客戶端的時(shí)間與服務(wù)器的時(shí)間相差很大，那么誤差就很大，所以在HTTP 1.1版開(kāi)始，使用Cache-Control:max-age=秒替代。如果Cache-Control與Expires同時(shí)存在，Cache-Control生效。

由于現(xiàn)在基本上都在使用Cache-Control，所以有必要對(duì)Cache-Control進(jìn)行詳細(xì)的總結(jié)一下。

• Cache-Control的可緩存性：

  取值	說(shuō)明
  public	HTTP返回的時(shí)候在Heaher中設(shè)置Cache-Control的值為public。它代表，這個(gè)HTTP請(qǐng)求它返回的內(nèi)容所經(jīng)過(guò)的任何路徑中，包括中間的一些HTTP代理服務(wù)器以及發(fā)出請(qǐng)求的客戶端瀏覽器，都可以進(jìn)行對(duì)返回內(nèi)容的緩存操作
  private	發(fā)起請(qǐng)求的瀏覽器才能使用返回?cái)?shù)據(jù)的緩存
  no-cache	可以在本地或者proxy服務(wù)器進(jìn)行緩存，每次發(fā)起請(qǐng)求都要去服務(wù)器驗(yàn)證，服務(wù)器返回可以使用緩存，才可以真正使用本地緩存，任何節(jié)點(diǎn)都不能直接使用緩存

• Cache-Control的有效期

  取值	說(shuō)明
  max-age=seconds	最常用模式，表示過(guò)期的秒數(shù)
  s-maxage=seconds	只有在代理服務(wù)器才會(huì)生效，且代理服務(wù)器會(huì)優(yōu)先使用s-maxage
  max-stale=seconds	它是發(fā)起請(qǐng)求方，主動(dòng)去帶著的header；在max-age過(guò)期后，但還在max-stale的有效期內(nèi)，還可以使用過(guò)期的緩存，不需要去原服務(wù)器請(qǐng)求新的內(nèi)容

• Cache-Control的其它取值

  取值	說(shuō)明
  no-store	瀏覽器或者proxy服務(wù)器都不能存返回?cái)?shù)據(jù)的緩存，永遠(yuǎn)都需要去服務(wù)器請(qǐng)求新的數(shù)據(jù)
  no-transform	主要用在proxy服務(wù)器，表示不要去隨意改動(dòng)返回的內(nèi)容，比如壓縮什么的

總結(jié)

這些細(xì)小的知識(shí)點(diǎn)，平時(shí)很少主動(dòng)去關(guān)注，但是真正到分析問(wèn)題的時(shí)候，很多時(shí)候卻是卡在這些細(xì)小的知識(shí)點(diǎn)上。還是那句話，細(xì)節(jié)決定成??！大的知識(shí)點(diǎn)，大的流程，大家都可以說(shuō)出一二，但是一旦細(xì)化了，才知道自己有好多的不懂，有好多的說(shuō)不清楚。只有退潮了，才知道誰(shuí)在裸泳！?。?/p>

2019年7月21日 于內(nèi)蒙古呼和浩特。