談談我理解的Http緩存機制

前幾天看到老鐵們分享的面經，談到 http 緩存機制的問題，痛下決心，一口氣研究個明白，分享給你們。

前端的發展愈來愈迅速，能作的事情愈來愈多，承擔的責任愈來愈重，經過了解 http 緩存機制，能夠幫助廣大前端開發工做者提升網站的訪問效率，也能有效減輕服務器的壓力。

http 緩存規則

http緩存機制有兩種緩存規則：強緩存 和 對比緩存（也有稱爲協商緩存）， 這個規則是由服務器響應攜帶的。

第一次請求

不管強緩存仍是對比緩存，瀏覽器第一次請求服務器時候，都先要到緩存數據庫去請求是否有緩存數據，返回結果固然是沒有緩存數據了~ 而後再去請求服務器，服務器的響應數據會攜帶緩存規則，告訴客戶端是強緩存仍是對比緩存。以下圖所示：

但是強緩存和對比緩存究竟是什麼？如何判斷是強緩存仍是對比緩存？

強緩存

強緩存：在一個有效期時間內，請求緩存數據庫中的數據。

服務器會經過 cache-control: max-age:xxx (HTTP 1.1) 或者 Expire (HTTP 1.0)  告知瀏覽器請求數據的有效時間，在這個時間內，瀏覽器再次請求這個數據的時候就不用請求服務器，而是請求緩存數據庫裏的數據就行了。如圖：

 

這樣的好處：

1. 減輕了服務器的壓力。一個網站會有大量的用戶，海量的請求，服務器要對其處理和響應，這是一個巨大的負擔。

2. 瀏覽器獲得數據更快。不用等服務器返回 200 ，直接 304 到緩存數據庫中拿數據就行了， 節省了網絡傳送延遲等時間。

那麼 cache-control: max-age:xxx (HTTP 1.1) 或者 Expire (HTTP 1.0) 有什麼區別呢？

cache-control: max-age:xxx 是  HTTP 1.1 的內容， Expire 是 HTTP 1.0 的內容， Expire 是服務器產生的到期時限，若是本地的時間存在偏差，那麼會形成影響，因此 HTTP 1.1 推出 cache-control 屬性。cache-control: max-age:xxx 意爲 緩存的內容將在 xxx 秒後失效。

　　注意：

　　cache-control 的優先級比 Expire 高。

強緩存固然也存在問題，在這個期限時間內都用緩存數據了，那我服務器更新數據怎麼辦？下面介紹一下對比緩存。

對比緩存

對比緩存須要進行比較判斷是否能夠使用緩存。經過 cache-control：no-cache 使用對比緩存來驗證緩存數據。

第一次請求數據的時候，服務器會將緩存標識與數據一塊兒返回給客戶端，客戶端將兩者備份至緩存數據庫中。再次請求數據時，客戶端將備份的緩存標識發送給服務器，服務器根據緩存標識進行判斷，判斷成功後，返回304狀態碼，通知客戶端比較成功，能夠使用緩存數據。

對比緩存判斷是否命中經過兩對屬性：

1. Last-Modified  /  If-Modified-Since

Last-Modified 由服務器產生，指數據的最後修改時間，服務器將 Last-Modified 返回給客戶端，下一次瀏覽器再次請求會攜帶這個最後修改時間，放在  If-Modified-Since 裏，服務器拿到  If-Modified-Since 後，對比數據的最後修改時間：

比對成功，表明數據未修改過，返回狀態碼 304， 重定向到緩存數據庫。

對比失敗，表明數據距離上一次被請求時， 作過修改，就要從新響應數據， 返回 200。

2. Etag  /  If-None-Match

Etag  是由服務器產生的一個惟一標識，服務器將 Etag  返回給客戶端，下一次瀏覽器再次請求會攜帶這個標識，放在   If-None-Match 裏，服務器拿到  If-None-Match 後，對比本身的數據標識：

比對成功，表明數據未修改過，返回狀態碼 304， 重定向到緩存數據庫。

對比失敗，表明數據距離上一次被請求時， 作過修改，就要從新響應數據， 返回 200。

 　　注意：

　　 Etag  /  If-None-Match 優先級高於 Last-Modified  /  If-Modified-Since

總結：

隨着前端技術的進步，前端可以作的事情愈來愈多，瞭解 http 內容好處良多，至少跟後臺開發推鍋不至於被牽着鼻子走，哈哈~~~

　　純屬我的看法，若有異議，歡迎提出，轉載請指明出處，素質分享。