瀏覽器緩存機(jī)制介紹

對(duì)于瀏覽器緩存灾票，相信很多開發(fā)者對(duì)它是又愛又恨，一方面茫虽，它可以極大地提升用戶體驗(yàn)刊苍，另一方面，在開發(fā)中經(jīng)常會(huì)由于瀏覽器緩存而展示了「錯(cuò)誤」的東西席噩。那么班缰，瀏覽器緩存究竟是什么呢贤壁？它的內(nèi)部機(jī)制又是怎樣的悼枢？接下來就讓我跟大家分享一下瀏覽器緩存機(jī)制。

簡(jiǎn)單來說脾拆，瀏覽器緩存就是把一個(gè)已經(jīng)請(qǐng)求過的 web 資源拷貝一份存儲(chǔ)在瀏覽器中馒索，當(dāng)下次請(qǐng)求相同的資源時(shí)，瀏覽器會(huì)根據(jù)緩存機(jī)制決定直接使用副本響應(yīng)訪問請(qǐng)求還是再次向服務(wù)器發(fā)送請(qǐng)求名船。

如下圖所示是我在第二次打開某個(gè)網(wǎng)頁時(shí)的資源請(qǐng)求圖绰上，可以看出里面大部分資源是從瀏覽器直接讀取了緩存。

圖片發(fā)自簡(jiǎn)書App

那么瀏覽器緩存究竟有什么作用呢渠驼？在這里我將瀏覽器緩存的作用簡(jiǎn)單地歸結(jié)為以下幾點(diǎn)蜈块。

加快頁面打開速
降低服務(wù)器壓力
減少網(wǎng)絡(luò)損耗

所以瀏覽器緩存雖然有時(shí)對(duì)我們開發(fā)者來說并不那么「友好」，但其對(duì)提升用戶體驗(yàn)卻有很大的幫助迷扇，接下來就讓我們來學(xué)習(xí)瀏覽器緩存機(jī)制吧百揭。

瀏覽器緩存的分類：
瀏覽器緩存有 HTML Meta 標(biāo)簽控制與 HTTP 頭信息控制兩種。

一蜓席、HTML Meta 標(biāo)簽控制
HTML Meta 標(biāo)簽控制是指在 html 頁面中加入如下標(biāo)簽<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
上述代碼的作用是告訴瀏覽器當(dāng)前頁面不被緩存器一，所以每當(dāng)需要請(qǐng)求該頁面時(shí)都需要去服務(wù)器獲取。但由于僅有部分瀏覽器支持該標(biāo)簽厨内，并且所有的緩存代理服務(wù)器均不支持祈秕，所以并未被廣泛使用。

二雏胃、HTTP 頭信息控制緩存请毛，即http緩存，http緩存分為兩種：強(qiáng)緩存與協(xié)商緩存

瀏覽器每次在向服務(wù)器發(fā)起 HTTP 請(qǐng)求獲得請(qǐng)求結(jié)果后瞭亮，會(huì)根據(jù)響應(yīng)報(bào)文中 HTTP 頭的緩存標(biāo)識(shí)字段 Expires 和 Cache-Control方仿，來決定是否將請(qǐng)求結(jié)果存入瀏覽器緩存中。Expires 是 HTTP 1.0 的字段，而 Cache-Control 是 HTTP 1.1 的字段兼丰，當(dāng) Expires 與 Cache-Control 同時(shí)存在時(shí)玻孟，Cache-Control 的優(yōu)先級(jí)要高于 Expires。

瀏覽器每次在向服務(wù)器發(fā)起 HTTP 請(qǐng)求時(shí)鳍征，都會(huì)查找瀏覽器緩存中是否存在其相應(yīng)的請(qǐng)求結(jié)果黍翎，然后根據(jù)緩存標(biāo)識(shí)字段來決定其是直接使用之前緩存的副本還是再次向服務(wù)器發(fā)出 HTTP 請(qǐng)求。

對(duì)于每次瀏覽器第一次 HTTP 請(qǐng)求來說艳丛，瀏覽器緩存中并不存在其請(qǐng)求資源相應(yīng)的副本匣掸，這時(shí)瀏覽器便會(huì)直接向服務(wù)器發(fā)出 HTTP 請(qǐng)求來獲得相應(yīng)的請(qǐng)求結(jié)果，并根據(jù)緩存標(biāo)識(shí)字段氮双，來決定是否將請(qǐng)求結(jié)果作為副本存入瀏覽器緩存中碰酝。

HTTP 保持已緩存數(shù)據(jù)與服務(wù)器數(shù)據(jù)之間充分一致的機(jī)制稱為文檔過期和服務(wù)器再驗(yàn)證。而從http緩存分類來看戴差，也有將其分為強(qiáng)制緩存和協(xié)商緩存送爸。

下面我就文檔過期和服務(wù)器再驗(yàn)證的機(jī)制做詳細(xì)的介紹，下面表述的過程都是指瀏覽器緩存中已經(jīng)存在其相應(yīng)資源副本的情況暖释。

文檔過期（強(qiáng)緩存）

當(dāng)瀏覽器發(fā)起 HTTP 請(qǐng)求時(shí)袭厂，會(huì)根據(jù)瀏覽器緩存中的緩存標(biāo)識(shí)字段來驗(yàn)證文檔（資源副本）是否過期。
上述說的緩存標(biāo)識(shí)字段便是 Expires 和 Cache-Control球匕。
Expires 是服務(wù)器端在響應(yīng)請(qǐng)求時(shí)用來規(guī)定資源的失效時(shí)間纹磺，是一個(gè)絕對(duì)時(shí)間。
Cache-Control 是服務(wù)器端在響應(yīng)請(qǐng)求時(shí)用來規(guī)定資源是否需要被瀏覽器緩存以及緩存的有效時(shí)間等亮曹，是個(gè)相對(duì)時(shí)間橄杨。

圖片發(fā)自簡(jiǎn)書App

Cache-Control 主要取值如下：

public：所有內(nèi)容都將被緩存（客戶端和代理服務(wù)器都可緩存）
private：內(nèi)容只緩存到私有緩存中（僅客戶端可以緩存，代理服務(wù)器不可緩存）
no-cache：必須先與服務(wù)器確認(rèn)返回的響應(yīng)是否被更改照卦，然后才能使用該響應(yīng)來滿足后續(xù)對(duì)同一個(gè)網(wǎng)址的請(qǐng)求式矫。因此，如果存在合適的驗(yàn)證令牌（ETag）窄瘟，no-cache 會(huì)發(fā)起往返通信來驗(yàn)證緩存的響應(yīng)衷佃，如果資源未被更改，可以避免下載
no-store：所有內(nèi)容都不會(huì)被緩存或 Internet 臨時(shí)文件中
must-revalidation/proxy-revalidation：如果緩存的內(nèi)容失效蹄葱，請(qǐng)求必須發(fā)送到服務(wù)器/代理以進(jìn)行重新驗(yàn)證
max-age=xxx：緩存的內(nèi)容將在 xxx 秒后失效

這里需要注意的是氏义，no-cache 的作用是指跳過文檔過期的驗(yàn)證而直接進(jìn)行服務(wù)器再驗(yàn)證，而 no-store 是指資源禁止被緩存图云。

在瀏覽器緩存中根據(jù) Expires 和 Cache-Control 的值來驗(yàn)證文檔（資源副本）是否過期的過程惯悠，稱為 HTTP 的文檔過期驗(yàn)證機(jī)制。若是文檔沒有過期竣况，則瀏覽器會(huì)直接使用緩存中的文檔作為返回結(jié)果克婶，若是文檔已經(jīng)過期了，則需要進(jìn)行服務(wù)器再驗(yàn)證。

服務(wù)器再驗(yàn)證 （協(xié)商緩存）

在瀏覽器緩存中情萤，還保存了其它關(guān)于資源副本的描述字段鸭蛙，這些字段都是服務(wù)器返回信息頭帶過來的，如 Last-Modified 和 Etag筋岛。?Last-Modified是http1.0字段 和 Etag是http1.1字段娶视，當(dāng) Last-Modified / If-Modified-Since 和 Etag / If-None-Match 同時(shí)存在的時(shí)候Etag / If-None-Match 的優(yōu)先級(jí)要高于 Last-Modified / If-Modified-Since

圖片發(fā)自簡(jiǎn)書App

Last-Modified 是服務(wù)器端在響應(yīng)請(qǐng)求時(shí)用來說明資源的最后修改時(shí)間。與之對(duì)應(yīng)的是 If-Modified-Since 字段睁宰，在服務(wù)器再驗(yàn)證過程中肪获，瀏覽器發(fā)送的 HTTP 請(qǐng)求的請(qǐng)求頭中會(huì)帶上 If-Modified-Since 字段，值為該資源 Last-Modified 屬性的值柒傻。

當(dāng)服務(wù)器端接收到帶有 If-Modified-Since 屬性的請(qǐng)求時(shí)孝赫，則會(huì)將 If-Modified-Since 屬性的值與被請(qǐng)求資源的最后修改時(shí)間做對(duì)比。如果相同红符，說明資源沒有新的修改青柄，則響應(yīng) HTTP 304，瀏覽器會(huì)繼續(xù)使用原先保存的該資源的副本违孝；如果最后修改時(shí)間比較新刹前，則說明資源被修改過，則響應(yīng) HTTP 200雌桑，并且返回最新的資源。

Etag 是服務(wù)器端在響應(yīng)請(qǐng)求時(shí)用來說明資源在服務(wù)器端的唯一標(biāo)識(shí)祖今。與之對(duì)應(yīng)的是 If-None-Match 字段校坑，在服務(wù)器再驗(yàn)證過程中，瀏覽器發(fā)送的 HTTP 請(qǐng)求的請(qǐng)求頭中會(huì)帶上?If-None-Match字段千诬，值為該資源 Etag 屬性的值耍目。

當(dāng)服務(wù)器端接收到帶有 If-None-Match 屬性的請(qǐng)求時(shí)，則會(huì)將 If-None-Match 屬性的值與被請(qǐng)求資源的唯一標(biāo)識(shí)做對(duì)比徐绑。如果相同邪驮，說明資源沒有新的修改，則響應(yīng) HTTP 304傲茄，瀏覽器會(huì)繼續(xù)使用原先保存的該資源的副本毅访；如果不同，則說明資源被修改過盘榨，則響應(yīng) HTTP 200喻粹，并且返回最新的資源。

圖片發(fā)自簡(jiǎn)書App

下面用一張流程圖來完整說明當(dāng)瀏覽器發(fā)起 HTTP 請(qǐng)求時(shí)緩存機(jī)制的過程：

圖片發(fā)自簡(jiǎn)書App

禁止瀏覽器緩存

最后草巡，雖然說瀏覽器緩存對(duì)用戶體驗(yàn)有極大的好處守呜，但是作為開發(fā)者，我們?cè)陂_發(fā)的時(shí)候則需要禁止這「討厭」瀏覽器緩存，我的方法是打開瀏覽器的開發(fā)者工具查乒，在 Network 中有個(gè) Disable cache 弥喉，鉤上就可以了，鉤上后瀏覽器會(huì)忽略掉文檔過期驗(yàn)證和服務(wù)器再驗(yàn)證的過程玛迄，直接向服務(wù)器請(qǐng)求最新的資源档桃。谷歌開發(fā)者工具禁用瀏覽器緩存

圖片發(fā)自簡(jiǎn)書App

引申問題

HTTP 1.1 中 Etag 的出現(xiàn)主要是為了解決幾個(gè) Last-Modified 比較難解決的問題：
1、Last-Modified 標(biāo)注的最后修改只能精確到秒級(jí)憔晒，如果某些文件在1秒鐘以內(nèi)被修改多次的話藻肄，它將不能準(zhǔn)確標(biāo)注文件的修改時(shí)間；
2拒担、如果某些文件會(huì)被定期生成嘹屯，但有時(shí)內(nèi)容并沒有任何變化，但 Last-Modified 卻改變了从撼，導(dǎo)致文件沒法使用緩存州弟；
3、有可能存在服務(wù)器沒有準(zhǔn)確獲取文件修改時(shí)間低零，或者與代理服務(wù)器時(shí)間不一致等情形婆翔；

參考擴(kuò)展文章：https://www.cnblogs.com/ranyonsue/p/8918908.html