圖解HTTP緩存

用途

HTTP緩存主要用在對一些實時性要求不高的靜態文件進行的緩存，每每都是存在瀏覽器端，防止這些「多餘」的請求重複的訪問服務器，對服務器形成壓力，從而提升網站的性能。

原理

現有兩端，瀏覽器C和服務器端S。

瀏覽器向服務器發送請求，獲取一個文件f

服務器就把f給返回瀏覽器

假如這個文件的內容變化不是那麼快，一兩週更新一次，瀏覽器每次請求服務器都返回相同的文件，豈不是對服務器資源的一種浪費？

如何解決呢？

瀏覽器把請求後拿到的文件存到本地，等下次請求的時候，看看本地是否有緩存文件，若是有，直接拿本地的文件，豈不是就不用請求服務器了？這其實就是http緩存的最最根本的原理。

C端瀏覽器端把請求來的文件緩存到如圖下f的小方格內

等到下次C端再次請求此文件時，就直接從瀏覽器緩存的文件中拿，而再也不向S服務器端發起請求了

如下瀏覽器截圖中標紅的部分，就是沒有發起請求，直接從瀏覽器緩存中獲取的數據

兩種緩存方式

瀏覽器端有了緩存以後，不能一直有效吧，若是文件更新了，咱們還繼續使用瀏覽器緩存中的數據，雖然說時效性不強，但長期使用舊文件也不算合理吧。

http協議提供了兩種維度來讓緩存失效：時間和文件的修改。

利用時間來讓緩存失效

時間維度很簡單，就是設定一個緩存時間段，過了這個時間段，緩存就自動失效了，瀏覽器就會發起請求獲取文件。這個設定時間的http字段就是cache-control字段。

cache-control 可設置的字段值有：

• private ：客戶端能夠緩存
• public ：客戶端和代理服務器均可緩存，大部分狀況能夠認爲public和private是同樣的
• max-age=xxx ： 緩存的內容將在 xxx 秒後失效 (時間就是在這兒設置的)
• no-cache ：須要使用另一種http緩存策略來驗證緩存數據
• no-store ：全部緩存策略都不會進行(這裏指的是兩種緩存策略都不會進行)

cache-control 緩存原理

第一次訪問請求，客戶端C向服務端S發起一個文件請求，服務器返回文件並在response中加了響應頭"Cache-Control:max-age=60"，這樣一來，這個f文件只能在瀏覽器端存 60秒

在這60秒鐘，客戶端請求服務器的f文件會直接從緩存中拿取

60秒事後，緩存失效，瀏覽器再次請求文件須要從新向服務器發起請求。

注意：假如說請求中包含「Cache-Control:max-age=0」或者「Cache-Control:no-store」不管響應中返回的"max-age"值是多少，都不會緩存到服務器。瀏覽器中對於地址欄中直接輸入文件地址的請求作了優化處理，加上了「Cache-Control:max-age=0」，也就是說，若是這個css、js或者其餘靜態文件是經過你在瀏覽器上直接輸入得到的，將會每時每刻都是獲取最新的。

經過查看文件的修改來讓緩存失效

這種維度比較的科學：瀏覽器先請求服務得到文件後，服務器會返回該文件的最後修改時間Last-Modified，做爲文件的一個標識，下次瀏覽器請求的時候，會帶着這個標識去請求(此時爲If-Modified-Since)，而後服務器作校驗，若是說時間標識If-Modified-Since等於服務器的文件修改時間，則說明沒有修改，返回304狀態碼，瀏覽器從緩存中獲取文件，可是若是瀏覽器保存的時間標識If-Modified-Since小於服務器端的文件修改時間，那麼，說明文件發生了修改，瀏覽器就會從新獲取新的文件。 （If-Modified-Since的時間若是大於服務器端文件的時間，會被認爲是錯誤的請求）

如圖，瀏覽器C向服務器發S起請求，服務器S返回文件的同時還會返回文件的最後修改時間Last-Modified做爲文件時間標識，瀏覽器會將文件和文件時間標識都緩存起來。

假如服務器端的文件f並無被修改，服務器經過判斷請求頭帶的時間標識If-Modified-Since得出結論後，都會返回狀態碼304告訴瀏覽器文件沒有被修改，讓瀏覽器使用緩存。

假如服務器端的文件f修改了，那麼，瀏覽器將從新獲取文件，並緩存到瀏覽器中。

雖然經過文件最後修改時間做爲標識已經很完美了，可是，仍是可能存在一個問題：就是有可能服務器端的文件修改後，又改回原來的樣子，這樣，雖然文件最後修改時間變了，可是，文件內容並無改變。這樣仍是會有多餘的請求到達服務器，該如何處理呢？ 能夠將文件內容做爲一個惟一標識，例如能夠對文件內容取MD5值做爲字段(etag)也傳給瀏覽器端，假如這個文件內容沒變化，那麼MD5值也不會改變。那麼，處理流程就變成了這樣：服務器端先判斷文件修改時間是否發生了變化，若是發生了變化，那麼再對比瀏覽器傳來的If-None-Match即瀏覽器端保留的E-tag值，若是發生了變化，則證實文件修改了，須要瀏覽器從新下載文件，若是沒有，則證實文件內容沒變化，返回304狀態碼。

如圖，瀏覽器C要訪問服務器S的f文件，服務器S返回了文件最後修改時間Last-Modified和文件的內容標識E-tag，瀏覽器將這兩個字段及其文件緩存了起來

當文件最後修改時間沒變，文件內容也沒變的時候，返回304，讓瀏覽器從緩存中拿取文件。

當文件最後修改時間變了，文件內容沒變的時候，返回304，讓瀏覽器從緩存中拿取文件。

當文件修改時間變了，文件內容也變了的時候，服務器會從新下發新的文件給瀏覽器。

此維度讓緩存失效牽扯的http字段有點多，咱們最後整理一下： 文件最後修改時間字段：

• Response：Last-Modified
• Request：If-Modified-Since

文件內容標識字段：

• Response：E-tag
• Request：If-None-Match

更多精彩內容，請關注個人微信公衆號 互聯網技術窩 或者加微信共同探討交流：