緩存是解決http1.1當(dāng)中的性能問題主要手段。緩存可能存在于客戶端瀏覽器上，也可以存在服務(wù)器上面，當(dāng)使用過期緩存可能給用戶展示的是錯(cuò)誤的信息而導(dǎo)致一些bug。

HTTP 緩存：為當(dāng)前請(qǐng)求復(fù)用前請(qǐng)求的響應(yīng)

緩存其實(shí)是在時(shí)間維度上面的緩存，第一個(gè)請(qǐng)求緩存了，那么為后續(xù)的請(qǐng)求就可以使用第一個(gè)請(qǐng)求緩存住的響應(yīng)。

request發(fā)出請(qǐng)求到web server發(fā)出的響應(yīng)，其中這個(gè)響應(yīng)當(dāng)中可以得到一些信息，告訴我們這個(gè)響應(yīng)是可以被緩存的，接下來緩存到本地的瀏覽器的緩存當(dāng)中。

后面想要再次發(fā)起請(qǐng)求的時(shí)候，會(huì)先去判斷瀏覽器當(dāng)中的緩存是否過期了，因?yàn)樵陧憫?yīng)當(dāng)中明確的指出js css只能存在幾天，幾個(gè)小時(shí)，之后就必須到服務(wù)器獲取，如果沒有過期，那么就直接使用本地的緩存。

?jss css文件都是使用的緩存。因?yàn)榭梢詮膕ize這里看到memory cache表示從緩存當(dāng)中讀出來的，也就是這個(gè)文件壓根沒有向服務(wù)器端發(fā)送（所以這些請(qǐng)求壓根不會(huì)發(fā)送，也就是壓根沒有網(wǎng)絡(luò)請(qǐng)求，沒有網(wǎng)絡(luò)帶寬，這樣用戶體驗(yàn)也會(huì)好一些）。

如果緩存過期，則繼續(xù)從服務(wù)器驗(yàn)證

首先去看到緩存是過期了，但是緩存得有一個(gè)標(biāo)簽，這個(gè)標(biāo)簽告訴服務(wù)器再返回304你可以繼續(xù)使用，那么直接可以和用戶來展示。

百度首頁告訴我們過期時(shí)間還是挺久的，可以從max-age和expire這里看到過期時(shí)間還是很久的，瀏覽器要想認(rèn)為它過期是比較難的。

curl 'http://ss.bdimg.com/static/superman/css/recommand/init-c52228535a.css' \-H 'Referer: http://www1.baidu.com/' \-H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36' \--compressed

?如果瀏覽器中有緩存，但是過期了會(huì)怎么樣？那么瀏覽器會(huì)添加一些相應(yīng)的頭部

curl 'http://ss.bdimg.com/static/superman/css/recommand/init-c52228535a.css' \-H 'Referer: http://www1.baidu.com/' \-H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36' \--compressed -H 'if-None-Match: "6387f366-2a20"' -I

etag就是響應(yīng)的一個(gè)指紋，這個(gè)時(shí)候服務(wù)器就知道緩存了一個(gè)響應(yīng)，服務(wù)器端會(huì)保存這個(gè)指紋，比較是Ok的，它就會(huì)返回304,好處就是content-length為0，這樣就節(jié)約了大量的帶寬。

這個(gè)時(shí)候?yàn)g覽器客戶端就知道了，直接使用緩存中的過期響應(yīng)就行了。