瀏覽器 http 緩存機(jī)制總結(jié)
http 報(bào)文頭信息控制緩存介紹
Expires
? 指的是緩存過(guò)期的時(shí)間自沧,超過(guò)這個(gè)時(shí)間就代表了資源的過(guò)期,另外需要注意的是 Expires 是 http/1.0 的標(biāo)準(zhǔn),由于現(xiàn)在大多使用的是 http/1.1 的標(biāo)準(zhǔn),而 http/1.1 中更多使用 cache-control ,當(dāng)這兩個(gè)同時(shí)存在的時(shí)候糙箍,cache-control 的優(yōu)先級(jí)更高。

Cache-control
Cache-Control 有多種字段可選牵祟,常見(jiàn)主要有下面這幾種:
可緩存性
-
public
表示可以被任意地方緩存深夯,比如請(qǐng)求的客戶端、代理服務(wù)器等
-
private
表示只能被單個(gè)用戶緩存诺苹,不能被代理服務(wù)器等緩存
-
no-cache
強(qiáng)制所有緩存了該響應(yīng)的緩存用戶咕晋,在使用已存儲(chǔ)的緩存數(shù)據(jù)前,發(fā)送帶驗(yàn)證器的請(qǐng)求到原始服務(wù)器
到期
-
max-age=< seconds >
指定了一個(gè)時(shí)間長(zhǎng)度收奔,表示在這個(gè)時(shí)間段內(nèi)資源可以從緩存中獲取掌呜,注意的是單位是 秒( s )。
-
s-maxage=< seconds >
覆蓋max-age 或者 Expires 頭坪哄,僅僅適用于共享緩存质蕉,在私有緩存會(huì)被忽略。
-
max-stale[=<seconds>]
這個(gè)表示可以接受過(guò)期的資源翩肌,但是過(guò)期的資源過(guò)期的時(shí)間不能大于這個(gè)字段指定的時(shí)間模暗。
重新驗(yàn)證
-
must-revalidate
緩存在使用之前驗(yàn)證舊的資源的狀態(tài),并且不可以使用過(guò)期資源念祭。
其它
-
no-store
不可以緩存服務(wù)器響應(yīng)的資源兑宇,每次都重新請(qǐng)求資源。
?
Last-Modified/If-Modified-Since
Last-Modified
瀏覽器第一次請(qǐng)求服務(wù)器某個(gè)資源時(shí)粱坤,服務(wù)器響應(yīng)報(bào)文中會(huì)帶上一個(gè)這個(gè)標(biāo)志隶糕,表示的是該響應(yīng)資源最近一次修改的時(shí)間瓷产。

If-Modified-Since
第一次請(qǐng)求某個(gè)服務(wù)器資源時(shí),響應(yīng)報(bào)文返回中的 Last-Modified 會(huì)被瀏覽器記錄下來(lái)枚驻, 再次請(qǐng)求這個(gè)資源時(shí)濒旦,請(qǐng)求報(bào)文中會(huì)帶上 If-Last-Modified 字段 并且值為 之前記錄下來(lái)的時(shí)間。

服務(wù)器接收到請(qǐng)求報(bào)文時(shí)拿到了 If-Modifie-Since 字段的值测秸,用If-Modified-Since 這個(gè)值與該資源最近修改時(shí)間對(duì)比,如果 If-Modified-Since 時(shí)間早于資源最近修改時(shí)間灾常,說(shuō)明資源被更改過(guò)霎冯,則應(yīng)該響應(yīng) 新的資源(http 200),反之說(shuō)明資源沒(méi)有被修改過(guò),返回 http 304 通知瀏覽器可以繼續(xù)使用緩存钞瀑。
Etag/If-None-Match
類(lèi)似 Last-Modified/If-Modified-Since沈撞,第一次請(qǐng)求時(shí)服務(wù)器響應(yīng) 會(huì)帶上 Etag 標(biāo)志,指的是由服務(wù)器對(duì)該資源生成了一段 hash 字符串雕什,之后的請(qǐng)求會(huì)帶上 If-None-Match 缠俺, 服務(wù)器根據(jù) If-None-Match 來(lái) 通知客戶端是否使用緩存,如果資源 Etag 沒(méi)有變化贷岸,通知客戶端使用緩存壹士,反之響應(yīng)新的資源。
疑問(wèn)
這幾個(gè)頭部字段功能有很多重疊啊偿警,怎么使用躏救?
首先,我們將這幾種 http 緩存相關(guān)頭部分為兩種類(lèi)型螟蒸,強(qiáng)緩存和協(xié)商緩存盒使,Expires 和 Cache-Control 為強(qiáng)緩存,Last-Modified/If-Modified-Since 和 Etag/If-None-Match 為協(xié)商緩存七嫌。
先通過(guò) 強(qiáng)緩存來(lái)判斷資源是否過(guò)期少办,如果沒(méi)有過(guò)期,則使用緩存诵原。反之鞭莽,我們通過(guò)協(xié)商緩存的來(lái)判斷資源是否更改,如果更改過(guò)量愧,則重新獲取資源衩椒;在沒(méi)有更改過(guò)的情況下,從緩存中讀取惹资。 詳細(xì)過(guò)程如下:
首次請(qǐng)求:

再次請(qǐng)求

Etag 和 Last-Modified 的區(qū)別是啥贺纲?
- Last-Modified 只能精確到秒,所以一些實(shí)時(shí)性要求高的地方使用 Etag 較好褪测;
- 對(duì)于定期生成的資源文件猴誊,Last-Modified 是變化的潦刃,導(dǎo)致客戶端不能更好使用緩存,而 Etag 根據(jù)資源生成的 hash 字符串懈叹, 只要資源不變 Etag 就不會(huì)變化乖杠;
- Etag 的精度比 Last-modified 高,屬于強(qiáng)驗(yàn)證澄成,要求資源字節(jié)級(jí)別的一致胧洒,優(yōu)先級(jí)高。如果服務(wù)器端有提供 ETag 的話墨状,必須先對(duì) ETag 進(jìn)行 Conditional Request卫漫;
- 有些服務(wù)器不能精確得到資源最后修改時(shí)間。
總結(jié)
到現(xiàn)在肾砂,我們也就對(duì) http 緩存機(jī)制有了一個(gè)較為全面的了解列赎,可以借助它來(lái)提高我們網(wǎng)頁(yè)的訪問(wèn)體驗(yàn),并且減少不必要的資源浪費(fèi)镐确。