通俗解釋瀏覽器緩存機制

轉自：https://zhuanlan.zhihu.com/p/23299600?refer=study-fe

1. 思路1，無緩存

瀏覽器向服務器請求資源 a.jpg，服務器找到對應資源把內容返回給瀏覽器。當瀏覽器再次向服務器請求資源a.jpg時，服務器從新發送完整的數據文件給瀏覽器。

• 優勢：簡單，啥都不用作
• 缺點：每次請求都查找並返回原始文件，浪費帶寬（1990年的帶寬很貴啊）

2. 思路2，有緩存無更新

瀏覽器第一次請求a.jpg 時服務器會發送完整的文件，瀏覽器能夠把這個文件存到本地（緩存），下次再須要這個文件時直接從本地獲取就好了，這樣就能省下帶寬了。

• 優勢: 省帶寬
• 缺點: 若是服務器上a.jpg的文件內容變了，瀏覽器每次都從緩存讀取沒法獲取最新文件

3. 思路3， 緩存+更新機制

瀏覽器第一次請求a.jpg 時服務器會發送完整的文件，服務器在發送文件的時候還附帶發送一些額外信息——過時時間，如 Expires: Mon,10 Dec 1990 02:25:22GMT。瀏覽器能夠把這個文件和額外信息存到本地。當再次須要a.jpg的時候瀏覽器用當前瀏覽器時間和Expires作個比較，若是當前時間在過時時間之內，就直接使用緩存文件((200, from xx cache)；若是在過時時間之外就從新向服務器發送請求要資源(200)。 服務器在每次給資源的時候都會發送新的過時時間

• 優勢：緩存可控制
• 缺點：控制的功能太單一；這種格式的時間很容易寫錯

 

4. 思路4， 緩存+更新機制升級版

好比：瀏覽器第一次請求a.jpg 時，服務器會發送完整的文件並附帶額外信息

Cache-Control: max-age=300；

瀏覽器把文件和附帶信息保存起來。當再次須要a.jpg 時，若是是在300秒之內發起的請求則直接使用緩存(200, from xx cache)，不然從新發起網絡請求(200)。下面是Cache-Control常見的幾個值：

• Public表示響應可被任何中間節點緩存，如 Browser <-- proxy1 <-- proxy2 <-- Server，中間的proxy能夠緩存資源，好比下次再請求同一資源proxy1直接把本身緩存的東西給 Browser 而再也不向proxy2要。
• Private表示中間節點不容許緩存，對於Browser <-- proxy1 <-- proxy2 <-- Server，proxy 會老老實實把Server 返回的數據發送給proxy1,本身不緩存任何數據。當下次Browser再次請求時proxy會作好請求轉發而不是自做主張給本身緩存的數據。
• no-cache表示不使用 Cache-Control的緩存控制方式作前置驗證，而是使用 Etag 或者Last-Modified字段來控制緩存
• no-store ，真正的不緩存任何東西。瀏覽器會直接向服務器請求原始文件，而且請求中不附帶 Etag 參數(服務器認爲是新請求)。
• max-age，表示當前資源的有效時間，單位爲秒。

優勢：緩存控制功能更強大

缺點：假如瀏覽器再次請求資源a.jpg的時間間隔超過了max-age，這時候向服務器發送請求服務器應該會從新返回a.jpg的完整文件。但若是 a.jpg 在服務器上未作任何修改，發送a.jpg的完整文件就太浪費帶寬了，其實只要發送一個「a.jpg未被更改」的短消息標示就行了。

5. 思路5， 緩存+更新機制終極版

好比：瀏覽器第一次請求a.jpg 時，服務器會發送完整的文件並附帶額外信息，其中Etag 是 對a.jpg文件的編碼，若是a.jpg在服務端未被修改，這個值就不會變

Cache-Control: max-age=300； ETag:W/"e-cbxLFQW5zapn79tQwb/g6Q"

瀏覽器把a.jpg和額外信息保存到本地。假如瀏覽器在300秒之內再次須要獲取a.jpg時，瀏覽器直接從緩存讀取a.jpg(200, from xx cache)。假如瀏覽器在300秒以後再次須要獲取a.jpg時，瀏覽器發現該緩存的文件已經不新鮮了，因而就向服務器發送請求 從新獲取a.jpg, 在發送請求的時候附帶剛剛保存的a.jpg的ETag ( If-None-Match：W/"e-cbxLFQW5zapn79tQwb/g6Q")。 服務器在接收到請求後拿瀏覽器請求的 Etag 和當前文件從新計算後端 Etag 作個比較，若是兩者相等表示文件在未修改則發送個短消息（響應頭，不包含圖片內容, 304），若是兩者不等則發送新文件和新的 ETag，瀏覽器獲取新文件並更新該文件的 Etag。

與 ETag 相似功能的是Last-Modified/If-Modified-Since。當資源過時時（max-age超時），發現資源具備Last-Modified聲明，則再次向web服務器請求時帶上頭 If-Modified-Since，表示請求時間。web服務器收到請求後發現有頭If-Modified-Since 則與被請求資源的最後修改時間進行比對。若最後修改時間較新，說明資源又被改動過，則響應整片資源內容（200）；若最後修改時間較舊，說明資源無新修改，則響應HTTP 304 ，告知瀏覽器繼續使用所保存的cache。

 

2018.12.25 更新

 

2019.3.29 更新：

一篇好的博文：https://www.jianshu.com/p/54cc04190252