當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

前端缓存之HTTP缓存（二）

發(fā)布時(shí)間：2023/12/10 HTML 22 豆豆

生活随笔收集整理的這篇文章主要介紹了前端缓存之HTTP缓存（二）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.1 什么是HTTP緩存？

HTTP緩存：當(dāng)客戶(hù)端向服務(wù)端請(qǐng)求資源時(shí)，會(huì)先去到瀏覽器緩存，如果瀏覽器緩存有需要請(qǐng)求資源的副本，就可以直接從瀏覽器緩存中提取，而不會(huì)去到服務(wù)器。

常見(jiàn)的http緩存都只能緩存get方式請(qǐng)求響應(yīng)的資源，不能處理其他類(lèi)型的響應(yīng)。

HTTP緩存都是從第二次請(qǐng)求開(kāi)始的，當(dāng)?shù)谝淮握?qǐng)求資源時(shí)，服務(wù)器會(huì)返回資源，并在請(qǐng)求頭中傳回資源的緩存參數(shù)；第二次請(qǐng)求時(shí)，瀏覽器會(huì)對(duì)這些參數(shù)進(jìn)行判斷，命中強(qiáng)緩存的就返回200，不命中會(huì)把請(qǐng)求參數(shù)加到請(qǐng)求頭中傳給服務(wù)器，判斷是否命中協(xié)商緩存，命中協(xié)商緩存返回304（簡(jiǎn)單點(diǎn)來(lái)說(shuō)就是服務(wù)端已經(jīng)執(zhí)行了GET，但文件未發(fā)生變化），否則服務(wù)器會(huì)返回新的資源。

而HTTP緩存分為強(qiáng)緩存和協(xié)商緩存。強(qiáng)緩存如果生效，不需要再和服務(wù)器發(fā)生交互，而協(xié)商緩存不管是否生效，都需要與服務(wù)端發(fā)生交互。

1.1.1 強(qiáng)緩存

強(qiáng)緩存在緩存數(shù)據(jù)未失效的情況下（即Cache-Control的max-age沒(méi)有過(guò)期或者Expires的緩存時(shí)間沒(méi)有過(guò)期），那么就會(huì)直接使用瀏覽器的緩存數(shù)據(jù)，不會(huì)再向服務(wù)器發(fā)送任何請(qǐng)求。強(qiáng)制緩存生效時(shí)，http狀態(tài)碼為200。這個(gè)方式頁(yè)面加載的速度很快，性能好，但是在這期間，如果服務(wù)端的資源修改了，頁(yè)面上是無(wú)法獲取的，因?yàn)樗粫?huì)再向服務(wù)器發(fā)送請(qǐng)求了。就好比如我們?cè)趯?shí)際開(kāi)發(fā)中，修改了某個(gè)頁(yè)面的樣式，在頁(yè)面上刷新但修改的內(nèi)容沒(méi)有生效，因?yàn)槭褂玫氖菑?qiáng)緩存，這時(shí)候就需要Ctrl+F5。

header屬性：

Pragma（HTTP/1.0）
- no-cache：不直接使用緩存，根據(jù)新鮮度來(lái)使用緩存，
  
  響應(yīng)頭不支持這個(gè)屬性，優(yōu)先級(jí)最高，但在HTTP/1.1廢棄了
Cache-Control（HTTP/1.1）
- no-cache：不直接使用緩存，根據(jù)新鮮度來(lái)使用緩存
- no-store：不使用緩存，每次都是請(qǐng)求下載新資源
- max-age：緩存時(shí)長(zhǎng)
- public/private：是否只能被單個(gè)用戶(hù)使用，默認(rèn)為private
- must-revalidate：每次訪問(wèn)需要緩存校驗(yàn)
  
  請(qǐng)求頭和響應(yīng)頭都支持這個(gè)屬性，不適用于HTTP/1.0，在緩存未失效前，得不到修改后的資源
Expires（時(shí)間）
- GMT時(shí)間
  
  服務(wù)端和客戶(hù)端的時(shí)間不一致會(huì)出現(xiàn)問(wèn)題，適用于HTTP/1.0和HTTP/1.1，在緩存未失效前，得不到修改后的資源

1.1.2 協(xié)商緩存

當(dāng)?shù)谝淮握?qǐng)求時(shí)服務(wù)器返回的響應(yīng)頭中沒(méi)有Cache-Control和Expires或者Cache-Control和Expires過(guò)期，也或者他的屬性設(shè)置為no-cache（不走強(qiáng)緩存），那么瀏覽器第二次請(qǐng)求時(shí)就會(huì)與服務(wù)器進(jìn)行協(xié)商，與服務(wù)器對(duì)比判斷資源是否進(jìn)行了更新。如果服務(wù)器端的資源沒(méi)有修改，那么就會(huì)返回304，告訴瀏覽器可以使用緩存中的數(shù)據(jù)，這樣就減少了服務(wù)器的傳輸壓力。如果數(shù)據(jù)有更新服務(wù)器就會(huì)返回200狀態(tài)碼，服務(wù)器就會(huì)返回更新后的資源并且將緩存信息一起返回。

ETag/If-Not-Match（HTTP/1.1）
- 校驗(yàn)值
  
  默認(rèn)使用hash算法，在分布式環(huán)境下可能會(huì)出現(xiàn)不同服務(wù)器生成的ETag值不一致；精確的判斷資源有無(wú)被修改，可識(shí)別一秒內(nèi)的修改次數(shù)；計(jì)算ETag需要性能消耗
Last-Modified/If-Modified-Since（HTTP/1.0）
- GMT時(shí)間
  
  只要資源修改，無(wú)論內(nèi)容有無(wú)變化，都會(huì)將資源返回客戶(hù)端；以時(shí)刻為標(biāo)識(shí)，無(wú)法獲取一秒內(nèi)的修改變化；某些服務(wù)器不能準(zhǔn)確獲取最后的修改時(shí)間

當(dāng)瀏覽器第一次向服務(wù)器發(fā)送請(qǐng)求時(shí)，會(huì)在響應(yīng)頭中返回協(xié)商緩存頭的屬性：ETag和Last-Modified,其中ETag返回的是一個(gè)hash值，Last-Modified返回的是GMT格式的最后修改時(shí)間。瀏覽器第二次發(fā)送請(qǐng)求時(shí)，會(huì)在請(qǐng)求頭中帶上與ETag對(duì)應(yīng)的If-Not-Match，這個(gè)值就是響應(yīng)頭中返回的ETag的值，Last-Modified對(duì)應(yīng)If-Modified-Since。服務(wù)器在接收到這兩個(gè)參數(shù)后會(huì)進(jìn)行比較，如果返回304，則說(shuō)明請(qǐng)求資源沒(méi)被修改，瀏覽器可以直接在緩存中獲取數(shù)據(jù)，否則服務(wù)器會(huì)直接返回?cái)?shù)據(jù)。

ETag/If-Not-Match是在HTTP/1.1出現(xiàn)的，主要是解決以下問(wèn)題：

(1)、Last-Modified標(biāo)注的最后修改只能精確到秒級(jí)，如果某些文件在1秒鐘以?xún)?nèi)，被修改多次的話(huà)，它將不能準(zhǔn)確標(biāo)注文件的修改時(shí)間

(2)、如果某些文件被修改了，但是內(nèi)容并沒(méi)有任何變化，而Last-Modified卻改變了，導(dǎo)致文件沒(méi)法使用緩存

(3)、有可能存在服務(wù)器沒(méi)有準(zhǔn)確獲取文件修改時(shí)間，或者與代理服務(wù)器時(shí)間不一致等情形

2.1 如何使用HTTP緩存？

一般需要緩存的資源有html頁(yè)面和其他靜態(tài)資源：

html

html頁(yè)面緩存設(shè)置主要是在head標(biāo)簽中嵌入meta標(biāo)簽，這種方式只對(duì)頁(yè)面有效，對(duì)頁(yè)面上的資源無(wú)效
- 禁用緩存
  - IE瀏覽器才識(shí)別的標(biāo)簽，不一定會(huì)在請(qǐng)求字段加上Pragma，但的確會(huì)讓當(dāng)前頁(yè)面每次都發(fā)新請(qǐng)求
    <meta http-equiv="pragma" content="no-cache">
  - 其他主流瀏覽器識(shí)別的標(biāo)簽
    <meta http-equiv="cache-control" content="no-cache">
  - IE瀏覽器才識(shí)別的標(biāo)簽，該方式僅僅作為知會(huì)IE緩存時(shí)間的標(biāo)記，你并不能在請(qǐng)求或響應(yīng)報(bào)文中找到Expires字段
    <meta http-equiv="expires" content="0">
- 設(shè)置緩存
  - 僅有IE瀏覽器才識(shí)別的標(biāo)簽
    <meta http-equiv="Expires" content="Mon, 20 Aug 2018 23:00:00 GMT" />
  - 其他主流瀏覽器識(shí)別的標(biāo)簽
    <meta http-equiv="Cache-Control" content="max-age=7200" />
靜態(tài)資源

靜態(tài)資源的緩存一般是在web服務(wù)器上配置，例如nginx，Apache。

2.2 注意點(diǎn)

強(qiáng)緩存情況下，只要緩存還沒(méi)過(guò)期，就會(huì)直接從緩存中取數(shù)據(jù)，就算服務(wù)器端有數(shù)據(jù)變化，也不會(huì)從服務(wù)器端獲取了，這樣就無(wú)法獲取到修改后的數(shù)據(jù)。決解的辦法有：在修改后的資源加上隨機(jī)數(shù),確保不會(huì)從緩存中取。

盡量減少304的請(qǐng)求，因?yàn)槲覀冎?#xff0c;協(xié)商緩存每次都會(huì)與后臺(tái)服務(wù)器進(jìn)行交互，所以性能上不是很好。從性能上來(lái)看盡量多使用強(qiáng)緩存。

更多詳細(xì)的內(nèi)容可以看看這位大佬寫(xiě)的文章