這篇文章將為大家詳細講解有關(guān)什么是瀏覽器緩存，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站為您提適合企業(yè)的網(wǎng)站設(shè)計?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強的網(wǎng)絡(luò)競爭力！結(jié)合企業(yè)自身，進行網(wǎng)站設(shè)計及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到成都網(wǎng)站設(shè)計、成都網(wǎng)站制作， 我們的網(wǎng)頁設(shè)計師為您提供的解決方案。

對于瀏覽器緩存，相信很多開發(fā)者對它真的是又愛又恨。一方面極大地提升了用戶體驗，而另一方面有時會因為讀取了緩存而展示了“錯誤”的東西，而在開發(fā)過程中千方百計地想把緩存禁掉。那么瀏覽器緩存究竟是個什么樣的神奇玩意呢？

什么是瀏覽器緩存：

簡單來說，瀏覽器緩存就是把一個已經(jīng)請求過的Web資源（如html頁面，圖片，js，數(shù)據(jù)等）拷貝一份副本儲存在瀏覽器中。緩存會根據(jù)進來的請求保存輸出內(nèi)容的副本。當下一個請求來到的時候，如果是相同的URL，緩存會根據(jù)緩存機制決定是直接使用副本響應(yīng)訪問請求，還是向源服務(wù)器再次發(fā)送請求。比較常見的就是瀏覽器會緩存訪問過網(wǎng)站的網(wǎng)頁，當再次訪問這個URL地址的時候，如果網(wǎng)頁沒有更新，就不會再次下載網(wǎng)頁，而是直接使用本地緩存的網(wǎng)頁。只有當網(wǎng)站明確標識資源已經(jīng)更新，瀏覽器才會再次下載網(wǎng)頁。

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

為什么使用緩存：

（1）減少網(wǎng)絡(luò)帶寬消耗

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

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

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

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

帶寬對于個人網(wǎng)站運營者來說是十分重要，而對于大型的互聯(lián)網(wǎng)公司來說，可能有時因為錢多而真的不在乎。那Web緩存還有作用嗎？答案是肯定的，對于最終用戶，緩存的使用能夠明顯加快頁面打開速度，達到更好的體驗。

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

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

新鮮度（過期機制）：也就是緩存副本有效期。一個緩存副本必須滿足以下條件，瀏覽器會認為它是有效的，足夠新的：

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

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

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

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

瀏覽器緩存的控制：

（1）使用HTML Meta 標簽

Web開發(fā)者可以在HTML頁面的節(jié)點中加入標簽，代碼如下

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

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

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

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

（2）使用緩存有關(guān)的HTTP消息報頭

在這里就需要先跟大家介紹一下HTTP的相關(guān)知識。一個URI的完整HTTP協(xié)議交互過程是由HTTP請求和HTTP響應(yīng)組成的。有關(guān)HTTP詳細內(nèi)容可參考《Hypertext Transfer Protocol — HTTP/1.1》、《HTTP協(xié)議詳解》等。

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

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

·Cache-Control與Expires

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

·Last-Modified/ETag與Cache-Control/Expires

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

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

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

·Last-Modified與ETag

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

1. Last-Modified標注的最后修改只能精確到秒級，如果某些文件在1秒鐘以內(nèi)，被修改多次的話，它將不能準確標注文件的新鮮度

2. 如果某些文件會被定期生成，當有時內(nèi)容并沒有任何變化，但Last-Modified卻改變了，導(dǎo)致文件沒法使用緩存

3. 有可能存在服務(wù)器沒有準確獲取文件修改時間，或者與代理服務(wù)器時間不一致等情形

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

注意：

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

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

瀏覽器HTTP請求流程：

第一次請求：

再次請求：

用戶行為與緩存：

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

不能緩存的請求：

當然并不是所有請求都能被緩存，無法被瀏覽器緩存的請求如下：

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

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

3. 經(jīng)過HTTPS安全加密的請求（有人也經(jīng)過測試發(fā)現(xiàn)，ie其實在頭部加入Cache-Control：max-age信息，firefox在頭部加入Cache-Control:Public之后，能夠?qū)TTPS的資源進行緩存，參考《HTTPS的七個誤解》）

4. POST請求無法被緩存

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

關(guān)于什么是瀏覽器緩存就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當前名稱：什么是瀏覽器緩存-創(chuàng)新互聯(lián)
標題鏈接：http://weahome.cn/article/djhcsi.html