HTTP詳細(xì)說明緩存機(jī)制和原理

前言

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

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

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

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

HTTP報(bào)紙是瀏覽器和服務(wù)器之間通信時(shí)發(fā)送和響應(yīng)的數(shù)據(jù)塊。

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

報(bào)文信息主要分為兩部分

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

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

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

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

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

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

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

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

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

強(qiáng)制緩存

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

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

對強(qiáng)制緩存的反應(yīng)header有兩個(gè)字段來標(biāo)記失效規(guī)則(Expires/Cache-Control)

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

Expires

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

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

另一個(gè)問題是，到期時(shí)間由服務(wù)端生成，但客戶端時(shí)間可能與服務(wù)端時(shí)間有誤差，從而導(dǎo)致緩存命中誤差。

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

Cache-Control

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

舉個(gè)板栗

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

對比緩存

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

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

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

第一次訪問：

再次訪問：

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

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

對于對比緩存，緩存標(biāo)志的傳遞是我們需要理解的，它正在要求header和響應(yīng)header傳遞分為兩種標(biāo)志傳遞。接下來，我們單獨(dú)介紹。

Last-Modified/If-Modified-Since

Last-Modified：

當(dāng)服務(wù)器響應(yīng)請求時(shí)，告訴瀏覽器資源的最終修改時(shí)間。

If-Modified-Since：

當(dāng)再次要求服務(wù)器時(shí)，服務(wù)器返回的資源最終修改時(shí)間通過此字段通知服務(wù)器上次要求。

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

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

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

Etag/If-None-Match

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

Etag：

當(dāng)服務(wù)器響應(yīng)請求時(shí)，告訴瀏覽器當(dāng)前資源在服務(wù)器中的唯一標(biāo)識(生成規(guī)則由服務(wù)器決定)。

If-None-Match：

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

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

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

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

總結(jié)

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

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

第一個(gè)瀏覽器請求：

當(dāng)瀏覽器再次要求時(shí)：