前言

Http作為緩存機制web性能優(yōu)化的重要手段Web對于有興趣成為前端架構(gòu)師的學生來說，開發(fā)的學生應該是知識體系數(shù)據(jù)庫的基本環(huán)節(jié)。

然而，對于許多前端學生來說，他們只知道瀏覽器會緩存所需的靜態(tài)文件，但不清楚為什么緩存以及緩存是如何生效的。

在這里，我嘗試使用簡單明了的文字，如系統(tǒng)介紹HTTP緩存機制，希望能幫助你正確理解前端緩存。

在介紹HTTP緩存前，作為知識的鋪墊，先簡單介紹一下HTTP報文

HTTP報紙是瀏覽器和服務器之間通信時發(fā)送和響應的數(shù)據(jù)塊。

瀏覽器向服務器發(fā)送請求數(shù)據(jù)(request)報紙；服務器將數(shù)據(jù)返回到瀏覽器并返回響應(response)報文。

報文信息主要分為兩部分

為方便大家理解，我們認為瀏覽器存在一個緩存數(shù)據(jù)庫,用于存儲緩存信息。

當客戶第一次請求數(shù)據(jù)時，緩存數(shù)據(jù)庫中沒有相應的緩存數(shù)據(jù)，需要請求服務器。服務器返回后，將數(shù)據(jù)存儲到緩存數(shù)據(jù)庫中。

HTTP緩存有很多規(guī)則，根據(jù)是否需要重新向服務器發(fā)起請求進行分類。我將其分為兩類（強制緩存和比較緩存）。在詳細介紹這兩個規(guī)則之前，讓您通過時序圖簡單地了解這兩個規(guī)則。

當存在緩存數(shù)據(jù)時，請求數(shù)據(jù)的過程如下：

當存在緩存數(shù)據(jù)時，請求數(shù)據(jù)的流程如下：

對緩存機制了解不多的學生可能會問，在比較緩存的過程中，無論是否使用緩存，都需要向服務器發(fā)送請求，那么緩存是什么呢？

讓我們暫時放下這個問題。在詳細介紹每個緩存規(guī)則時，它將給您帶來答案。

我們可以看到兩種緩存規(guī)則的區(qū)別。如果強制緩存生效，則無需與服務器交互，無論緩存生效與否，都需要與服務器交互。

兩種緩存規(guī)則可以同時存在，強制緩存優(yōu)先級高于比較緩存，即當執(zhí)行強制緩存規(guī)則時，如果緩存生效，則直接使用緩存，則不再執(zhí)行比較緩存規(guī)則。

強制緩存

從以上可以看出，緩存數(shù)據(jù)可以直接使用，而緩存數(shù)據(jù)沒有失效。瀏覽器如何判斷緩存數(shù)據(jù)是否失效？

我們知道，當瀏覽器要求服務器沒有緩存數(shù)據(jù)時，服務器將返回數(shù)據(jù)和緩存規(guī)則，并在響應中包含緩存規(guī)則信息header中。

對強制緩存的反應header有兩個字段來標記失效規(guī)則(Expires/Cache-Control)

使用chrome當強制緩存生效時，開發(fā)者工具可以清楚地看到網(wǎng)絡要求：

Expires

Expires該值為服務端返回的到期時間，即下次請求時，請求時間小于服務端返回的到期時間，直接使用緩存數(shù)據(jù)。

不過Expires是HTTP1.現(xiàn)在默認瀏覽器默認使用0的東西HTTP1.因此，它的作用基本上被忽略了。

另一個問題是，到期時間由服務端生成，但客戶端時間可能與服務端時間有誤差，從而導致緩存命中誤差。

所以HTTP1.版本，使用Cache-Control替代。

Cache-Control

Cache-Control這是最重要的規(guī)則。private、public、no-cache、max-age，no-store，默認為private。

舉個板栗

圖中Cache-Control僅指定了max-age，所以默認為private，緩存時間為31536000秒(365天)，即在365天內(nèi)再次要求此數(shù)據(jù)，將直接獲取緩存數(shù)據(jù)庫中的數(shù)據(jù)并直接使用。

對比緩存

對比緩存，顧名思義，需要進行比較判斷是否可以使用緩存。

當瀏覽器首次要求數(shù)據(jù)時，服務器將緩存標識與數(shù)據(jù)一起返回到客戶端，客戶端將兩者備份到緩存數(shù)據(jù)庫。

當再次要求數(shù)據(jù)時，客戶端將備份的緩存標志發(fā)送給服務器。服務器根據(jù)緩存標志進行判斷。判斷成功后，返回304狀態(tài)碼，通知客戶端更成功，可以使用緩存數(shù)據(jù)。

第一次訪問：

再次訪問：

通過對兩張圖片的對比，我們可以清楚地發(fā)現(xiàn)，當對比緩存生效時，狀態(tài)代碼為304，報紙大小和請求時間大大降低。

原因是服務端在標識比較后只返回header部分，通過狀態(tài)碼通知客戶端使用緩存，不再需要將報告主體部分返回客戶端。

對于對比緩存，緩存標志的傳遞是我們需要理解的，它正在要求header和響應header傳遞分為兩種標志傳遞。接下來，我們單獨介紹。

Last-Modified/If-Modified-Since

Last-Modified：

當服務器響應請求時，告訴瀏覽器資源的最終修改時間。

If-Modified-Since：

當再次要求服務器時，服務器返回的資源最終修改時間通過此字段通知服務器上次要求。

服務器收到請求后，發(fā)現(xiàn)有頭頭If-Modified-Since比較被要求資源的最終修改時間。

如果資源的最終修改時間大于If-Modified-Since，說明資源再次變更，則響應整個資源內(nèi)容，返回狀態(tài)碼200；

若資源的最后修改時間小于或等于If-Modified-Since，說明資源沒有新修改，響應HTTP通知瀏覽器繼續(xù)使用保存的304cache。

Etag/If-None-Match

優(yōu)先級高于Last-Modified/If-Modified-Since

Etag：

當服務器響應請求時，告訴瀏覽器當前資源在服務器中的唯一標識(生成規(guī)則由服務器決定)。

If-None-Match：

在再次要求服務器時，通過此字段通知服務器客戶段緩存數(shù)據(jù)的唯一標識。

服務器收到請求后發(fā)現(xiàn)有頭If-None-Match比較被要求資源的唯一標志：

不同的是，如果資源再次改變，則響應整個資源內(nèi)容，返回狀態(tài)碼200；

同樣，如果資源沒有新修改，響應HTTP通知瀏覽器繼續(xù)使用保存的304cache。

總結(jié)

對于強制性緩存，服務器通知瀏覽器一個緩存時間，在緩存時間內(nèi)，下次請求，直接使用緩存，而不是在時間內(nèi)，執(zhí)行相對緩存策略。

緩存信息中的緩存Etag和Last-Modified瀏覽器直接使用緩存，通過請求發(fā)送給服務器，由服務器校準，返回304狀態(tài)碼。

第一個瀏覽器請求：

當瀏覽器再次要求時：