1、 強(qiáng)緩存，不向服務(wù)器發(fā)請(qǐng)求，直接從本地硬盤(from disk cache/from memory cache)或者內(nèi)存中獲取

2、協(xié)商緩存，向服務(wù)器發(fā)出驗(yàn)證，如果資源無(wú)更改，不重新返回資源內(nèi)容，資源內(nèi)容從本地獲取,，需要刷新command+r

3、如果需要從服務(wù)器直接獲取，需要強(qiáng)制刷新，就是所謂的command+shift+r

一、強(qiáng)緩存

是利用HTTP響應(yīng)報(bào)文中的Expires和Cache-Control兩個(gè)字段來(lái)控制的，用來(lái)表示資源的緩存時(shí)間。

Expires：該字段是HTTP/1.0時(shí)的規(guī)范，它的值是一個(gè)絕對(duì)時(shí)間的GMT格式的時(shí)間字符串，如Expires: Mon, 06 Feb 2017 08:26:48 GMT。這個(gè)時(shí)間代表資源的失效時(shí)間，在此之間，即命中強(qiáng)緩存。但是它有一個(gè)明顯的缺點(diǎn)，當(dāng)客戶端與服務(wù)器時(shí)間出現(xiàn)較大偏差，就會(huì)出現(xiàn)混亂。

Cache-Control：為了解決Expires出現(xiàn)的問(wèn)題，HTTP/1.1添加了Cache-Control。主要是利用max-age來(lái)進(jìn)行判斷，它是一個(gè)相對(duì)時(shí)間，如Cache-Control：max-age=600，代表著資源的有效期是600秒（10分鐘）。除了max-age外，Cache-Control還有以下幾個(gè)常用的值：

• no-cache：不適用強(qiáng)緩存。需要使用緩存協(xié)商。
• no-store：禁止瀏覽器緩存，不適用強(qiáng)緩存和緩存協(xié)商，每次請(qǐng)求資源都需要發(fā)送HTTP到服務(wù)器，每次都需要下載完整的資源。
• public：可以被所有的用戶緩存，包括客戶端和CDN等中間代理服務(wù)器。
• private：只允許客戶端緩存，不允許CDN等中間代理服務(wù)器對(duì)其緩存

Cache-Control與Expires可以在服務(wù)端配置同時(shí)啟用，但是Cache-Control的優(yōu)先級(jí)高于Expires 二、協(xié)商緩存 需要由服務(wù)器來(lái)確定客戶端緩存資源是否可用。這主要涉及Header中兩組字段：Last-Modified/If-Modified-Since或ETag/If-None-Match，這兩組字段都是成對(duì)出現(xiàn)的。若第一次的響應(yīng)頭沒(méi)有Last-Modified或ETag，則后續(xù)的請(qǐng)求頭部也不會(huì)有If-Modified-Since或If-None-Match。

　　Last-Modified/If-Modified-Since：瀏覽器第一次請(qǐng)求一個(gè)資源的時(shí)候，服務(wù)器返回的header中會(huì)加上Last-Modified，它是一個(gè)時(shí)間標(biāo)識(shí)該資源的最后修改時(shí)間。當(dāng)瀏覽器再次請(qǐng)求該資源時(shí)，HTTP請(qǐng)求頭部會(huì)帶上If-Modified-Since，該值為上次響應(yīng)報(bào)文頭部的Last-Modified的值，服務(wù)器接收到If-Modified-Since，會(huì)根據(jù)資源的最后修改時(shí)間來(lái)判斷是否命中協(xié)商緩存，如果命中，返回304(Not Modified)，并且不會(huì)返回Last-Modified和無(wú)響應(yīng)body。否則返回200,并且返回Last-Modified和有響應(yīng)的body。

　　ETag/If-None-Match：它們的值不是一個(gè)時(shí)間標(biāo)識(shí)，而是一個(gè)校驗(yàn)碼。ETag可以保證每一個(gè)資源都是唯一的，資源變化都會(huì)導(dǎo)致ETag變化，服務(wù)器根據(jù)接收到的If-None-Match來(lái)判斷是否命中協(xié)商緩存。但是當(dāng)服務(wù)器返回304的時(shí)候，由于ETag重新生成過(guò)(ETag的算法，沒(méi)有明確規(guī)定，可以每次生成，也可以生成后存儲(chǔ)起來(lái))，響應(yīng)頭部也會(huì)帶上ETag，即使它跟之前的沒(méi)有變化。

為什么要有ETag？不是已經(jīng)有Last-Modified嗎。

• 一些文件或許會(huì)周期性的修改，但是它的內(nèi)容沒(méi)有變化（只是改變了修改時(shí)間），這個(gè)時(shí)候我們并不希望客戶端認(rèn)為這個(gè)文件修改了，而重新獲取。
• 某些文件在1秒內(nèi)修改了N次，用If-Modified-Since無(wú)法進(jìn)行區(qū)分，因?yàn)镮f-Modified-Since的時(shí)間最小單位是秒。
• 某些服務(wù)器不能精確的得到文件的最后修改時(shí)間。
• Last-Modified和ETag可以一起使用，但是ETag的優(yōu)先級(jí)大于Last-Modified，當(dāng)ETag相同的情況下，才會(huì)繼續(xù)比較Last-Modified，最后才決定是否返回304。

看了這么多不知道你糊涂沒(méi)，下面有兩張圖，通過(guò)這兩張圖，你能對(duì)瀏覽器的緩存策略有一個(gè)新的認(rèn)識(shí)

三、談下瀏覽器緩存和CDN緩存的關(guān)系

cdn緩存就是在瀏覽器和服務(wù)器間增加的一層緩存，緩存一些html、圖片、css、xml等靜態(tài)資源。

無(wú)cdn：

　?? 用戶在瀏覽網(wǎng)站的時(shí)候，瀏覽器能夠在本地保存網(wǎng)站中的圖片或者其他文件的副本，這樣用戶再次訪問(wèn)該網(wǎng)站的時(shí)候，瀏覽器就不用再下載全部的文件，減少了下載量意味著提高了頁(yè)面加載的速度。

有cdn：

　　如果中間加上一層CDN，那么用戶瀏覽器與服務(wù)器的交互如下：

　　客戶端瀏覽器先檢查是否有本地緩存，是否過(guò)期，如果過(guò)期，則向CDN邊緣節(jié)點(diǎn)發(fā)起請(qǐng)求，CDN邊緣節(jié)點(diǎn)會(huì)檢測(cè)用戶請(qǐng)求數(shù)據(jù)的緩存是否過(guò)期，如果沒(méi)有過(guò)期，則直接響應(yīng)用戶請(qǐng)求，此時(shí)一個(gè)完成http請(qǐng)求結(jié)束;如果數(shù)據(jù)已經(jīng)過(guò)期，那么CDN還需要向源站發(fā)出回源請(qǐng)求(back to the source request),來(lái)拉取最新的數(shù)據(jù)。

四、不同的瀏覽器操作對(duì)應(yīng)的緩存操作

?

?

瀏覽器緩存刷新?

?

1.??在地址欄中輸入網(wǎng)址后按回車或點(diǎn)擊轉(zhuǎn)到按鈕

?

瀏覽器以最少的請(qǐng)求來(lái)獲取網(wǎng)頁(yè)的數(shù)據(jù)，瀏覽器會(huì)對(duì)所有沒(méi)有過(guò)期的內(nèi)容直接使用本地緩存，從而減少了對(duì)瀏覽器的請(qǐng)求。所以，Expires，max-age標(biāo)記只對(duì)這種方式有效。

?

2.??按F5或?yàn)g覽器刷新按鈕

?

瀏覽器會(huì)在請(qǐng)求中附加必要的緩存協(xié)商，但不允許瀏覽器直接使用本地緩存，它能夠讓 Last-Modified、ETag發(fā)揮效果，但是對(duì)Expires無(wú)效。

?

3.??按Ctrl+F5或按Ctrl并點(diǎn)擊刷新按鈕

?

這種方式就是強(qiáng)制刷新，總會(huì)發(fā)起一個(gè)全新的請(qǐng)求，不使用任何緩存。

?

參考： 1、http://blog.csdn.net/kikikind/article/details/6266101 2、http://blog.csdn.net/heluan123132/article/details/72885990 3、http://blog.csdn.net/lu123535884/article/details/51489951 4、http://www.cnblogs.com/slly/p/6732749.html

轉(zhuǎn)載于:https://www.cnblogs.com/shengulong/p/7442903.html

總結(jié)

以上是生活随笔為你收集整理的浏览器缓存:强缓存和协商缓存的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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