一張圖理解Http緩存

劉永祥發(fā)布于2019-08-06 13:35 / 1208人閱讀

摘要：用戶發(fā)起了一個請求后，瀏覽器發(fā)現(xiàn)先本地已有所請求資源的緩存，便開始檢查緩存是否過期。表明只有特定用戶才能使用緩存，適用于公共緩存服務(wù)器的情況。用戶行為最后附一張圖說明用戶行為對瀏覽器緩存的影響

參閱了一些瀏覽器緩存的資料，本文通過一張圖來歸納總結(jié)其過程。

瀏覽器第一次向一個web服務(wù)器發(fā)起http請求后，服務(wù)器會返回請求的資源，并且在響應(yīng)頭中添加一些有關(guān)緩存的字段如：Cache-Control、Expires、Last-Modified、ETag、Date等等。之后瀏覽器再向該服務(wù)器請求該資源就可以視情況使用強緩存和協(xié)商緩存。

強緩存：瀏覽器直接從本地緩存中獲取數(shù)據(jù)，不與服務(wù)器進行交互。

協(xié)商緩存：瀏覽器發(fā)送請求到服務(wù)器，服務(wù)器判定是否可使用本地緩存。

聯(lián)系與區(qū)別：兩種緩存方式最終使用的都是本地緩存；前者無需與服務(wù)器交互，后者需要。

下面假定瀏覽器已經(jīng)訪問了服務(wù)器，服務(wù)器返回了緩存相關(guān)的頭部字段且瀏覽器已對相關(guān)資源做好緩存。通過下圖來分析強緩存和協(xié)商緩存：

強緩存

如圖紅線所示的過程代表強緩存。用戶發(fā)起了一個http請求后，瀏覽器發(fā)現(xiàn)先本地已有所請求資源的緩存，便開始檢查緩存是否過期。有兩個http頭部字段控制緩存的有效期：Expires和Cache-Control，瀏覽器是根據(jù)以下兩步來判定緩存是否過期的：

查看緩存是否有Cache-Control的s-maxage或max-age指令，若有，則使用響應(yīng)報文生成時間Date + s-maxage/max-age獲得過期時間，再與當(dāng)前時間進行對比（s-maxage適用于多用戶使用的公共緩存服務(wù)器）；

如果沒有Cache-Control的s-maxage或max-age指令，則比較Expires中的過期時間與當(dāng)前時間。Expires是一個絕對時間。

注意，在HTTP/1.1中，當(dāng)首部字段Cache-Control有指定s-maxage或max-age指令，比起首部字段Expires，會優(yōu)先處理s-maxage或max-age。

另外下面列幾個Cache-Control的常用指令：

no-cache：含義是不使用本地緩存，需要使用協(xié)商緩存，也就是先與服務(wù)器確認(rèn)緩存是否可用。

no-store：禁用緩存。

public：表明其他用戶也可使用緩存，適用于公共緩存服務(wù)器的情況。

private：表明只有特定用戶才能使用緩存，適用于公共緩存服務(wù)器的情況。

經(jīng)過上述兩步判斷后，若緩存未過期，返回狀態(tài)碼為200，則直接從本地讀取緩存，這就完成了整個強緩存過程；如果緩存過期，則進入?yún)f(xié)商緩存或服務(wù)器返回新資源過程。

協(xié)商緩存

當(dāng)瀏覽器發(fā)現(xiàn)緩存過期后，緩存并不一定不能使用了，因為服務(wù)器端的資源可能仍然沒有改變，所以需要與服務(wù)器協(xié)商，讓服務(wù)器判斷本地緩存是否還能使用。此時瀏覽器會判斷緩存中是否有ETag或Last-Modified字段，如果沒有，則發(fā)起一個http請求，服務(wù)器根據(jù)請求返回資源；如果有這兩個字段，則在請求頭中添加If-None-Match字段（有ETag字段的話添加）、If-Modified-Since字段（有Last-Modified字段的話添加）。注意：如果同時發(fā)送If-None-Match 、If-Modified-Since字段，服務(wù)器只要比較If-None-Match和ETag的內(nèi)容是否一致即可；如果內(nèi)容一致，服務(wù)器認(rèn)為緩存仍然可用，則返回狀態(tài)碼304，瀏覽器直接讀取本地緩存，這就完成了協(xié)商緩存的過程，也就是圖中的藍(lán)線；如果內(nèi)容不一致，則視情況返回其他狀態(tài)碼，并返回所請求資源。下面詳細(xì)解釋下這個過程：

1.ETag和If-None-Match

二者的值都是服務(wù)器為每份資源分配的唯一標(biāo)識字符串。

瀏覽器請求資源，服務(wù)器會在響應(yīng)報文頭中加入ETag字段。資源更新時，服務(wù)器端的ETag值也隨之更新；

瀏覽器再次請求資源時，會在請求報文頭中添加If-None-Match字段，它的值就是上次響應(yīng)報文中的ETag的值；

服務(wù)器會比對ETag與If-None-Match的值是否一致，如果不一致，服務(wù)器則接受請求，返回更新后的資源；如果一致，表明資源未更新，則返回狀態(tài)碼為304的響應(yīng)，可繼續(xù)使用本地緩存，要注意的是，此時響應(yīng)頭會加上ETag字段，即使它沒有變化。

2.Last-Modified和If-Modified-Since

二者的值都是GMT格式的時間字符串。

瀏覽器第一次向服務(wù)器請求資源后，服務(wù)器會在響應(yīng)頭中加上Last-Modified字段，表明該資源最后一次的修改時間；

瀏覽器再次請求該資源時，會在請求報文頭中添加If-Modified-Since字段，它的值就是上次服務(wù)器響應(yīng)報文中的Last-Modified的值；

服務(wù)器會比對Last-Modified與If-Modified-Since的值是否一致，如果不一致，服務(wù)器則接受請求，返回更新后的資源；如果一致，表明資源未更新，則返回狀態(tài)碼為304的響應(yīng)，可繼續(xù)使用本地緩存，與ETag不同的是：此時響應(yīng)頭中不會再添加Last-Modified字段。

3.ETag較之Last-Modified的優(yōu)勢

以下內(nèi)容引用于：http協(xié)商緩存VS強緩存

你可能會覺得使用Last-Modified已經(jīng)足以讓瀏覽器知道本地的緩存副本是否足夠新，為什么還需要ETag呢？HTTP1.1中ETag的出現(xiàn)主要是為了解決幾個Last-Modified比較難解決的問題：

一些文件也許會周期性的更改，但是他的內(nèi)容并不改變(僅僅改變的修改時間)，這個時候我們并不希望客戶端認(rèn)為這個文件被修改了，而重新GET；

某些文件修改非常頻繁，比如在秒以下的時間內(nèi)進行修改，(比方說1s內(nèi)修改了N次)，If-Modified-Since能檢查到的粒度是s級的，這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒)；

某些服務(wù)器不能精確的得到文件的最后修改時間。

這時，利用ETag能夠更加準(zhǔn)確的控制緩存，因為ETag是服務(wù)器自動生成的資源在服務(wù)器端的唯一標(biāo)識符，資源每次變動，都會生成新的ETag值。Last-Modified與ETag是可以一起使用的，但服務(wù)器會優(yōu)先驗證ETag。

用戶行為

最后附一張圖說明用戶行為對瀏覽器緩存的影響：