摘要：對(duì)于瀏覽器緩存，相信很多開(kāi)發(fā)者對(duì)它真的是又愛(ài)又恨。那么瀏覽器緩存究竟是個(gè)什么樣的神奇玩意呢什么是瀏覽器緩存簡(jiǎn)單來(lái)說(shuō)，瀏覽器緩存就是把一個(gè)已經(jīng)請(qǐng)求過(guò)的資源如頁(yè)面，圖片，，數(shù)據(jù)等拷貝一份副本儲(chǔ)存在瀏覽器中。

對(duì)于瀏覽器緩存，相信很多開(kāi)發(fā)者對(duì)它真的是又愛(ài)又恨。一方面極大地提升了用戶體驗(yàn)，而另一方面有時(shí)會(huì)因?yàn)樽x取了緩存而展示了“錯(cuò)誤”的東西，而在開(kāi)發(fā)過(guò)程中千方百計(jì)地想把緩存禁掉。那么瀏覽器緩存究竟是個(gè)什么樣的神奇玩意呢？

　　簡(jiǎn)單來(lái)說(shuō)，瀏覽器緩存就是把一個(gè)已經(jīng)請(qǐng)求過(guò)的Web資源（如html頁(yè)面，圖片，js，數(shù)據(jù)等）拷貝一份副本儲(chǔ)存在瀏覽器中。緩存會(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)求。比較常見(jiàn)的就是瀏覽器會(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è)。

　　比如說(shuō)，在頁(yè)面請(qǐng)求之后，web資源都被緩存了，在后面的重復(fù)請(qǐng)求中，許多資源都是直接從緩存中讀取的（from cache），而不是重新去向服務(wù)器請(qǐng)求。

（1）減少網(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)成本。

（2）降低服務(wù)器壓力

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

（3）減少網(wǎng)絡(luò)延遲，加快頁(yè)面打開(kāi)速度

　　帶寬對(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è)面打開(kāi)速度，達(dá)到更好的體驗(yàn)。

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

　　新鮮度（過(guò)期機(jī)制）：也就是緩存副本有效期。一個(gè)緩存副本必須滿足以下條件，瀏覽器會(huì)認(rèn)為它是有效的，足夠新的：

　　　　1. 含有完整的過(guò)期時(shí)間控制頭信息（HTTP協(xié)議報(bào)頭），并且仍在有效期內(nèi)；

　　　　2. 瀏覽器已經(jīng)使用過(guò)這個(gè)緩存副本，并且在一個(gè)會(huì)話中已經(jīng)檢查過(guò)新鮮度；

　　滿足以上兩個(gè)情況的一種，瀏覽器會(huì)直接從緩存中獲取副本并渲染。

　　校驗(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)容。

　　（1）使用HTML Meta 標(biāo)簽

　　Web開(kāi)發(fā)者可以在HTML頁(yè)面的節(jié)點(diǎn)中加入標(biāo)簽，代碼如下

　　上述代碼的作用是告訴瀏覽器當(dāng)前頁(yè)面不被緩存，每次訪問(wèn)都需要去服務(wù)器拉取。但是！這里有個(gè)坑...

　　事實(shí)上這種禁用緩存的形式用處很有限：

　　　　a. 僅有IE才能識(shí)別這段meta標(biāo)簽含義，其它主流瀏覽器僅識(shí)別“Cache-Control:?no-store”的meta標(biāo)簽。

　　　　b. 在IE中識(shí)別到該meta標(biāo)簽含義，并不一定會(huì)在請(qǐng)求字段加上Pragma，但的確會(huì)讓當(dāng)前頁(yè)面每次都發(fā)新請(qǐng)求（僅限頁(yè)面，頁(yè)面上的資源則不受影響）。

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

　　在這里就需要先跟大家介紹一下HTTP的相關(guān)知識(shí)。一個(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)頭中，常見(jiàn)的與緩存有關(guān)的消息報(bào)頭有：

?　　在我們對(duì)HTTP請(qǐng)求頭和響應(yīng)頭的部分字段有了一定的認(rèn)識(shí)之后，我們接下來(lái)就來(lái)討論不同字段之間的關(guān)系和區(qū)別：

　　·?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。

　　·?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í)要高于Last-Modified/ETag。即當(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）了。

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

?　　·?Last-Modified與ETag

你可能會(huì)覺(jué)得使用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)生成或者由開(kāi)發(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》，這里不再深入。

　　注意：

　　1. Etag是服務(wù)器自動(dòng)生成或者由開(kāi)發(fā)者生成的對(duì)應(yīng)資源在服務(wù)器端的唯一標(biāo)識(shí)符，能夠更加準(zhǔn)確的控制緩存，但是需要注意的是分布式系統(tǒng)里多臺(tái)機(jī)器間文件的last-modified必須保持一致，以免負(fù)載均衡到不同機(jī)器導(dǎo)致比對(duì)失敗，Yahoo建議分布式系統(tǒng)盡量關(guān)閉掉Etag(每臺(tái)機(jī)器生成的etag都會(huì)不一樣，因?yàn)槌?last-modified、inode 也很難保持一致)。

?　　2.?Last-Modified/If-Modified-Since要配合Cache-Control使用，Etag/If-None-Match也要配合Cache-Control使用。

　　第一次請(qǐng)求：

　　再次請(qǐng)求：

?　　瀏覽器緩存行為還有用戶的行為有關(guān)，具體情況如下：

如果想學(xué)習(xí)Java工程化、高性能及分布式、深入淺出。微服務(wù)、Spring，MyBatis，Netty源碼分析的朋友可以加Java進(jìn)階交流群：895244712 ，有阿里大牛直播講解技術(shù)，以及Java大型互聯(lián)網(wǎng)技術(shù)的視頻免費(fèi)分享給大家。

　　當(dāng)然并不是所有請(qǐng)求都能被緩存，無(wú)法被瀏覽器緩存的請(qǐng)求如下：

　　　　1. HTTP信息頭中包含Cache-Control:no-cache，pragma:no-cache（HTTP1.0），或Cache-Control:max-age=0等告訴瀏覽器不用緩存的請(qǐng)求

　　　　2. 需要根據(jù)Cookie，認(rèn)證信息等決定輸入內(nèi)容的動(dòng)態(tài)請(qǐng)求是不能被緩存的

　　　　3. 經(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è)誤解》）

　　　　4. POST請(qǐng)求無(wú)法被緩存

　　　　5. HTTP響應(yīng)頭中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的請(qǐng)求無(wú)法被緩存

參考資料：

1.?http://www.cnblogs.com/520yang/articles/4807408.html??瀏覽器 HTTP 協(xié)議緩存機(jī)制詳解[](http://www.cnblogs.com/520yan...

2.?https://my.oschina.net/leejun2005/blog/369148??瀏覽器 HTTP 協(xié)議緩存機(jī)制詳解

3.?http://web.jobbole.com/82997/??瀏覽器緩存機(jī)制淺析

4.?http://www.alloyteam.com/2012/03/web-cache-2-browser-cache/? Web瀏覽器的緩存機(jī)制?

5.?http://www.cnblogs.com/vajoy/p/5341664.html??淺談瀏覽器http的緩存機(jī)制

6.?http://mp.weixin.qq.com/s/yf0pWRFM7v9Ru3D9_JhGPQ??瀏覽器緩存機(jī)制剖析