最近在項(xiàng)目中遇到了 IE瀏覽器因緩存問(wèn)題未能成功向后端發(fā)送 GET類型請(qǐng)求 的bug，然后順藤摸瓜順便看了看緩存的知識(shí)，覺得有必要總結(jié)跟大家分享一下。

在前端開發(fā)中，性能一直都是被大家所重視的一點(diǎn)，然而判斷一個(gè)網(wǎng)站的性能最直觀的就是看網(wǎng)頁(yè)打開的速度。其中提高網(wǎng)頁(yè)反應(yīng)速度的一個(gè)方式就是使用緩存。一個(gè)優(yōu)秀的緩存策略可以縮短網(wǎng)頁(yè)請(qǐng)求資源的距離，減少延遲，并且由于緩存文件可以重復(fù)利用，還可以減少帶寬，降低網(wǎng)絡(luò)負(fù)荷。

1. 介紹

web緩存是指一個(gè)web資源(如html頁(yè)面，圖片，js，數(shù)據(jù)等)存在于web服務(wù)器和客戶端(瀏覽器)之間的副本。

緩存會(huì)根據(jù)進(jìn)來(lái)的請(qǐng)求保存輸出內(nèi)容的副本；當(dāng)下一個(gè)請(qǐng)求來(lái)到的時(shí)候，如果是相同的URL，緩存會(huì)根據(jù)緩存機(jī)制決定是直接使用副本響應(yīng)訪問(wèn)請(qǐng)求，還是向源服務(wù)器再次發(fā)送請(qǐng)求。比較常見的就是瀏覽器會(huì)緩存訪問(wèn)過(guò)網(wǎng)站的網(wǎng)頁(yè)，當(dāng)再次訪問(wèn)這個(gè)URL地址的時(shí)候，如果網(wǎng)頁(yè)沒(méi)有更新，就不會(huì)再次下載網(wǎng)頁(yè)，而是直接使用本地緩存的網(wǎng)頁(yè)。只有當(dāng)網(wǎng)站明確標(biāo)識(shí)資源已經(jīng)更新，瀏覽器才會(huì)再次下載網(wǎng)頁(yè)。至于瀏覽器和網(wǎng)站服務(wù)器是如何標(biāo)識(shí)網(wǎng)站頁(yè)面是否更新的機(jī)制，將在后面介紹。

1.1 web緩存的作用

web緩存的作用顯而易見：

減少網(wǎng)絡(luò)帶寬消耗：無(wú)論對(duì)于網(wǎng)站運(yùn)營(yíng)者或者用戶，帶寬都代表著金錢，過(guò)多的帶寬消耗，只會(huì)便宜了網(wǎng)絡(luò)運(yùn)營(yíng)商。當(dāng)Web緩存副本被使用時(shí)，只會(huì)產(chǎn)生極小的網(wǎng)絡(luò)流量，可以有效的降低運(yùn)營(yíng)成本。

降低服務(wù)器壓力：給網(wǎng)絡(luò)資源設(shè)定有效期之后，用戶可以重復(fù)使用本地的緩存，減少對(duì)源服務(wù)器的請(qǐng)求，間接降低服務(wù)器的壓力。同時(shí)，搜索引擎的爬蟲機(jī)器人也能根據(jù)過(guò)期機(jī)制降低爬取的頻率，也能有效降低服務(wù)器的壓力。

減少網(wǎng)絡(luò)延遲，加快頁(yè)面打開速度：帶寬對(duì)于個(gè)人網(wǎng)站運(yùn)營(yíng)者來(lái)說(shuō)是十分重要，而對(duì)于大型的互聯(lián)網(wǎng)公司來(lái)說(shuō)，可能有時(shí)因?yàn)殄X多而真的不在乎。那Web緩存還有作用嗎？答案是肯定的，對(duì)于最終用戶，緩存的使用能夠明顯加快頁(yè)面打開速度，達(dá)到更好的體驗(yàn)。

1.2 web緩存的類型

web緩存大致可以分為以下幾種類型 詳細(xì)內(nèi)容：

數(shù)據(jù)庫(kù)數(shù)據(jù)緩存

服務(wù)器端緩存

瀏覽器端緩存

web應(yīng)用層緩存

瀏覽器通過(guò)代理服務(wù)器向源服務(wù)器發(fā)起請(qǐng)求的原理如下圖：

瀏覽器先向代理服務(wù)器發(fā)起web請(qǐng)求，再將請(qǐng)求轉(zhuǎn)發(fā)到源服務(wù)器。它屬于共享緩存，所以很多地方都可以使用其緩存資源，因此對(duì)于節(jié)省流量有很大作用。

瀏覽器緩存是將文件保存在客戶端，在同一個(gè)會(huì)話過(guò)程中會(huì)檢查緩存的副本是否足夠新，在后退網(wǎng)頁(yè)時(shí)，訪問(wèn)過(guò)的資源可以從瀏覽器緩存中拿出使用。通過(guò)減少服務(wù)器處理請(qǐng)求的數(shù)量，用戶將獲得更快的體驗(yàn)

下面著重關(guān)注一下瀏覽器緩存。

2. web緩存的工作原理

所有的緩存都是基于一套規(guī)則來(lái)幫助他們決定什么時(shí)候使用緩存中的副本提供服務(wù)(假設(shè)有副本可用的情況下，未被銷毀回收或者未被刪除修改)。這些規(guī)則有的在協(xié)議中有定義(如HTTP協(xié)議1.0和1.1)，有的則是由緩存的管理員設(shè)置(如DBA、瀏覽器的用戶、代理服務(wù)器管理員或者應(yīng)用開發(fā)者)。

2.1 瀏覽器端的緩存規(guī)則

對(duì)于瀏覽器端的緩存來(lái)講，這些規(guī)則是在HTTP協(xié)議頭和HTML頁(yè)面的 Meta標(biāo)簽中定義的。他們分別從新鮮度和校驗(yàn)值兩個(gè)維度來(lái)規(guī)定瀏覽器是直接使用緩存中的副本，還是需要去源服務(wù)器獲取更新的版本。

新鮮度(過(guò)期機(jī)制)：也就是緩存副本有效期。一個(gè)緩存副本必須滿足以下任一條件，瀏覽器會(huì)認(rèn)為它是有效的，足夠新的，而直接從緩存中獲取副本并渲染：

• 含有完整的過(guò)期時(shí)間控制頭信息(HTTP協(xié)議報(bào)頭)，并且仍在有效期內(nèi)
• 瀏覽器已經(jīng)使用過(guò)這個(gè)緩存副本，并且在一個(gè)會(huì)話中已經(jīng)檢查過(guò)新鮮度

校驗(yàn)值(驗(yàn)證機(jī)制)：服務(wù)器返回資源的時(shí)候有時(shí)在控制頭信息帶上這個(gè)資源的實(shí)體標(biāo)簽Etag(Entity Tag)，它可以用來(lái)作為瀏覽器再次請(qǐng)求過(guò)程的校驗(yàn)標(biāo)識(shí)。如過(guò)發(fā)現(xiàn)校驗(yàn)標(biāo)識(shí)不匹配，說(shuō)明資源已經(jīng)被修改或過(guò)期，瀏覽器需求重新獲取資源內(nèi)容。

2.2 瀏覽器緩存的控制

2.2.1 使用HTML的 Meta 標(biāo)簽

"Pragma"

CONTENT=

"no-cache"

>

上述代碼的作用是告訴瀏覽器當(dāng)前頁(yè)面不被緩存，每次訪問(wèn)都需要去服務(wù)器拉取。使用上很簡(jiǎn)單，但只有部分瀏覽器可以支持，而且所有緩存代理服務(wù)器都不支持，因?yàn)榇聿唤馕鯤TML內(nèi)容本身。可以通過(guò)這個(gè)頁(yè)面測(cè)試你的瀏覽器是否支持：[Pragma No-Cache Test] (http://www.procata.com/cachetest/tests/pragma/index.php)。

2.2.2 使用緩存有關(guān)的HTTP消息報(bào)頭

一個(gè)URI的完整HTTP協(xié)議交互過(guò)程是由HTTP請(qǐng)求和HTTP響應(yīng)組成的。有關(guān)HTTP詳細(xì)內(nèi)容可參考《Hypertext Transfer Protocol — HTTP/1.1》、《HTTP協(xié)議詳解》等。

在HTTP請(qǐng)求和響應(yīng)的消息報(bào)頭中，常見的與緩存有關(guān)的消息報(bào)頭有：

稍微解釋一下：

1. Cache-Control

max-age(單位為s)指定設(shè)置緩存最大的有效時(shí)間，定義的是時(shí)間長(zhǎng)短。當(dāng)瀏覽器向服務(wù)器發(fā)送請(qǐng)求后，在max-age這段時(shí)間里瀏覽器就不會(huì)再向服務(wù)器發(fā)送請(qǐng)求了。我們來(lái)找個(gè)資源看下。比如QQ推廣上的css資源，max-age=3600，也就是說(shuō)緩存有效期為3600秒(也就是1h)。于是在1天內(nèi)都會(huì)使用這個(gè)版本的資源，即使服務(wù)器上的資源發(fā)生了變化，瀏覽器也不會(huì)得到通知。max-age會(huì)覆蓋掉Expires，后面會(huì)有討論

s-maxage(單位為s)同max-age，只用于共享緩存(比如CDN緩存)。比如，當(dāng)s-maxage=60時(shí)，在這60秒中，即使更新了CDN的內(nèi)容，瀏覽器也不會(huì)進(jìn)行請(qǐng)求。也就是說(shuō)max-age用于普通緩存，而s-maxage用于代理緩存。如果存在s-maxage，則會(huì)覆蓋掉max-age和Expires header。

public 指定響應(yīng)會(huì)被緩存，并且在多用戶間共享。也就是下圖的意思。如果沒(méi)有指定public還是private，則默認(rèn)為public。

private 響應(yīng)只作為私有的緩存(見下圖)，不能在用戶間共享。如果要求HTTP認(rèn)證，響應(yīng)會(huì)自動(dòng)設(shè)置為 private

no-cache 指定不緩存響應(yīng)，表明資源不進(jìn)行緩存，但是設(shè)置了 no-cache 之后并不代表瀏覽器不緩存，而是在獲取緩存前要向服務(wù)器確認(rèn)資源是否被更改。因此有的時(shí)候只設(shè)置 no-cache 防止緩存還是不夠保險(xiǎn)，還可以加上 private 指令，將過(guò)期時(shí)間設(shè)為過(guò)去的時(shí)間。

no-store 絕對(duì)禁止緩存，一看就知道如果用了這個(gè)命令當(dāng)然就是不會(huì)進(jìn)行緩存啦～每次請(qǐng)求資源都要從服務(wù)器重新獲取。

must-revalidate 指定如果頁(yè)面是過(guò)期的，則去服務(wù)器進(jìn)行獲取。這個(gè)指令并不常用，就不做過(guò)多的討論了。

cache-control的種類這么多，然而怎么使用它們呢，參看下圖：

2. Expires

緩存過(guò)期時(shí)間，用來(lái)指定資源到期的時(shí)間，是服務(wù)器端的具體的時(shí)間點(diǎn)。也就是說(shuō)，Expires=max-age + 請(qǐng)求時(shí)間 ，需要和Last-modified結(jié)合使用。但在上面我們提到過(guò)，cache-control的優(yōu)先級(jí)更高。Expires是Web服務(wù)器響應(yīng)消息頭字段，在響應(yīng)http請(qǐng)求時(shí)告訴瀏覽器在過(guò)期時(shí)間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)，而無(wú)需再次請(qǐng)求。

3. Last-modified & If-modified-since

服務(wù)器端文件的最后修改時(shí)間，需要和cache-control共同使用，是檢查服務(wù)器端資源是否更新的一種方式。當(dāng)瀏覽器再次進(jìn)行請(qǐng)求時(shí)，會(huì)向服務(wù)器傳送If-Modified-Since報(bào)頭，詢問(wèn)Last-Modified時(shí)間點(diǎn)之后資源是否被修改過(guò)。如果沒(méi)有修改，則返回碼為304，使用緩存；如果修改過(guò)，則再次去服務(wù)器請(qǐng)求資源，返回碼和首次請(qǐng)求相同為200，資源為服務(wù)器最新資源。

4. Etag & & If-None-Match

根據(jù)實(shí)體內(nèi)容生成一段hash字符串，標(biāo)識(shí)資源的狀態(tài)，由服務(wù)端產(chǎn)生。瀏覽器會(huì)將這串字符串傳回服務(wù)器，驗(yàn)證資源是否已經(jīng)修改，如果沒(méi)有修改，過(guò)程如下：

2.2.3 緩存報(bào)頭種類與優(yōu)先級(jí)

1. Cache-Control與Expires

Cache-Control與 Expires的作用一致，都是指明當(dāng)前資源的有效期，控制瀏覽器是否直接從瀏覽器緩存取數(shù)據(jù)還是重新發(fā)請(qǐng)求到服務(wù)器取數(shù)據(jù)。只不過(guò) Cache-Control的選擇更多，設(shè)置更細(xì)致，如果同時(shí)設(shè)置的話，其優(yōu)先級(jí)高于 Expires。

2. Last-Modified與ETag

你可能會(huì)覺得使用 Last-Modified 已經(jīng)足以讓瀏覽器知道本地的緩存副本是否足夠新，為什么還需要 Etag(實(shí)體標(biāo)識(shí))呢？HTTP1.1中Etag的出現(xiàn)主要是為了解決幾個(gè) Last-Modified 比較難解決的問(wèn)題：

• Last-Modified 標(biāo)注的最后修改只能精確到秒級(jí)，如果某些文件在1秒鐘以內(nèi)，被修改多次的話，它將不能準(zhǔn)確標(biāo)注文件的新鮮度
• 如果某些文件會(huì)被定期生成，當(dāng)有時(shí)內(nèi)容并沒(méi)有任何變化，但 Last-Modified 卻改變了，導(dǎo)致文件沒(méi)法使用緩存
• 有可能存在服務(wù)器沒(méi)有準(zhǔn)確獲取文件修改時(shí)間，或者與代理服務(wù)器時(shí)間不一致等情形

Etag是服務(wù)器自動(dòng)生成或者由開發(fā)者生成的對(duì)應(yīng)資源在服務(wù)器端的唯一標(biāo)識(shí)符，能夠更加準(zhǔn)確的控制緩存。Last-Modified與ETag是可以一起使用的，服務(wù)器會(huì)優(yōu)先驗(yàn)證ETag，一致的情況下，才會(huì)繼續(xù)比對(duì)Last-Modified，最后才決定是否返回304。Etag的服務(wù)器生成規(guī)則和強(qiáng)弱Etag的相關(guān)內(nèi)容可以參考，《互動(dòng)百科-Etag》和《HTTP Header definition》，這里不再深入。

3. Last-Modified/ETag 與 Cache-Control/Expires

配置 Last-Modified/ETag的情況下，瀏覽器再次訪問(wèn)統(tǒng)一URI的資源，還是會(huì)發(fā)送請(qǐng)求到服務(wù)器詢問(wèn)文件是否已經(jīng)修改，如果沒(méi)有，服務(wù)器會(huì)只發(fā)送一個(gè)304回給瀏覽器，告訴瀏覽器直接從自己本地的緩存取數(shù)據(jù)；如果修改過(guò)那就整個(gè)數(shù)據(jù)重新發(fā)給瀏覽器；

Cache-Control/Expires則不同，如果檢測(cè)到本地的緩存還是有效的時(shí)間范圍內(nèi)，瀏覽器直接使用本地副本，不會(huì)發(fā)送任何請(qǐng)求。兩者一起使用時(shí)， Cache-Control/Expires的優(yōu)先級(jí)要高，即當(dāng)本地副本根據(jù) Cache-Control/Expires發(fā)現(xiàn)還在有效期內(nèi)時(shí)，則不會(huì)再次發(fā)送請(qǐng)求去服務(wù)器詢問(wèn)修改時(shí)間 Last-Modified或?qū)嶓w標(biāo)識(shí) Etag了。

一般情況下，兩者會(huì)配合一起使用，因?yàn)榧词狗?wù)器設(shè)置緩存時(shí)間, 當(dāng)用戶點(diǎn)擊“刷新”按鈕時(shí)，瀏覽器會(huì)忽略緩存繼續(xù)向服務(wù)器發(fā)送請(qǐng)求，這時(shí) Last-Modified/ETag將能夠很好利用304，從而減少響應(yīng)開銷。

2.2.4 哪些請(qǐng)求不能被緩存？

無(wú)法被瀏覽器緩存的請(qǐng)求：

• HTTP信息頭中包含Cache-Control:no-cache，pragma:no-cache，或Cache-Control:max-age=0等告訴瀏覽器不用緩存的請(qǐng)求
• 需要根據(jù)Cookie，認(rèn)證信息等決定輸入內(nèi)容的動(dòng)態(tài)請(qǐng)求是不能被緩存的
• 經(jīng)過(guò)HTTPS安全加密的請(qǐng)求(有人也經(jīng)過(guò)測(cè)試發(fā)現(xiàn)，ie其實(shí)在頭部加入Cache-Control：max-age信息，firefox在頭部加入Cache-Control:Public之后，能夠?qū)TTPS的資源進(jìn)行緩存，參考《HTTPS的七個(gè)誤解》)
• POST請(qǐng)求無(wú)法被緩存
• HTTP響應(yīng)頭中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的請(qǐng)求無(wú)法被緩存

3. 使用緩存流程

一個(gè)用戶發(fā)起一個(gè)靜態(tài)資源請(qǐng)求的時(shí)候，瀏覽器會(huì)通過(guò)以下幾步來(lái)獲取并展示資源：

緩存行為主要由緩存策略決定，而緩存策略由內(nèi)容擁有者設(shè)置。這些策略主要通過(guò)特定的HTTP頭部來(lái)清晰地表達(dá)。

以上過(guò)程也可以被概括為三個(gè)階段：

本地緩存階段：先在本地查找該資源，如果有發(fā)現(xiàn)該資源，而且該資源還沒(méi)有過(guò)期，就使用這一個(gè)資源，完全不會(huì)發(fā)送http請(qǐng)求到服務(wù)器；

協(xié)商緩存階段：如果在本地緩存找到對(duì)應(yīng)的資源，但是不知道該資源是否過(guò)期或者已經(jīng)過(guò)期，則發(fā)一個(gè)http請(qǐng)求到服務(wù)器，然后服務(wù)器判斷這個(gè)請(qǐng)求，如果請(qǐng)求的資源在服務(wù)器上沒(méi)有改動(dòng)過(guò)，則返回304，讓瀏覽器使用本地找到的那個(gè)資源；

緩存失敗階段：當(dāng)服務(wù)器發(fā)現(xiàn)請(qǐng)求的資源已經(jīng)修改過(guò)，或者這是一個(gè)新的請(qǐng)求(在本來(lái)沒(méi)有找到資源)，服務(wù)器則返回該資源的數(shù)據(jù)，并且返回200， 當(dāng)然這個(gè)是指找到資源的情況下，如果服務(wù)器上沒(méi)有這個(gè)資源，則返回404。

4. 用戶操作行為與緩存的關(guān)系

用戶在使用瀏覽器的時(shí)候，會(huì)有各種操作，比如輸入地址后回車，按F5刷新等，這些行為會(huì)對(duì)緩存有什么影響呢？

通過(guò)上表我們可以看到，當(dāng)用戶在按 F5進(jìn)行刷新的時(shí)候，會(huì)忽略Expires/Cache-Control的設(shè)置，會(huì)再次發(fā)送請(qǐng)求去服務(wù)器請(qǐng)求，而Last-Modified/Etag還是有效的，服務(wù)器會(huì)根據(jù)情況判斷返回304還是200；

而當(dāng)用戶使用 Ctrl+F5進(jìn)行強(qiáng)制刷新的時(shí)候，只是所有的緩存機(jī)制都將失效，重新從服務(wù)器拉去資源。

• 普通刷新 – 當(dāng)按下F5或者點(diǎn)擊刷新按鈕來(lái)刷新頁(yè)面的時(shí)候，瀏覽器將繞過(guò)本地緩存來(lái)發(fā)送請(qǐng)求到服務(wù)器, 此時(shí), 協(xié)商緩存是有效的
• 強(qiáng)制刷新 – 當(dāng)按下ctrl+F5來(lái)刷新頁(yè)面的時(shí)候, 瀏覽器將繞過(guò)各種緩存(本地緩存和協(xié)商緩存), 直接讓服務(wù)器返回最新的資源
• 回車或轉(zhuǎn)向 – 當(dāng)在地址欄上輸入回車或者按下跳轉(zhuǎn)按鈕的時(shí)候, 所有緩存都生效

5. 如何從緩存角度改善站點(diǎn)

• 同一個(gè)資源保證URL的穩(wěn)定性
• 給css、js、圖片等資源增加HTTP緩存頭，并強(qiáng)制入口html不被緩存
• 減少對(duì)Cookie的依賴
• 減少對(duì)HTTPS加密協(xié)議的使用
• 多用Get方式請(qǐng)求動(dòng)態(tài)Cgi
• 動(dòng)態(tài)CGI也是可以被緩存

— 網(wǎng)上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學(xué)習(xí)過(guò)程中的總結(jié)，如果發(fā)現(xiàn)錯(cuò)誤，歡迎留言指出~

參考：

Web緩存機(jī)制系列：http://www.alloyteam.com/2012/03/web-cache-1-web-cache-overview/

淺談web緩存：http://www.alloyteam.com/2016/03/discussion-on-web-caching/

Web前后端緩存技術(shù)：http://blog.csdn.net/LeeSirbupt/article/details/54409931

作者：SHERlocked93鏈接：前端下午茶

總結(jié)

以上是生活随笔為你收集整理的前端获取浏览器标识_浏览器缓存机制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。