瀏覽器緩存:強緩存和協商緩存

一、 強緩存，不向服務器發請求，直接從本地硬盤(from disk cache/from memory cache)或者內存中獲取

二、協商緩存，向服務器發出驗證，若是資源無更改，不從新返回資源內容，資源內容從本地獲取,，須要刷新command+r

三、若是須要從服務器直接獲取，須要強制刷新，就是所謂的command+shift+r

1、強緩存

是利用HTTP響應報文中的Expires和Cache-Control兩個字段來控制的，用來表示資源的緩存時間。

Expires：該字段是HTTP/1.0時的規範，它的值是一個絕對時間的GMT格式的時間字符串，如Expires: Mon, 06 Feb 2017 08:26:48 GMT。這個時間表明資源的失效時間，在此之間，即命中強緩存。可是它有一個明顯的缺點，當客戶端與服務器時間出現較大誤差，就會出現混亂。

Cache-Control：爲了解決Expires出現的問題，HTTP/1.1添加了Cache-Control。主要是利用max-age來進行判斷，它是一個相對時間，如Cache-Control：max-age=600，表明着資源的有效期是600秒（10分鐘）。除了max-age外，Cache-Control還有如下幾個經常使用的值：

• no-cache：不適用強緩存。須要使用緩存協商。
• no-store：禁止瀏覽器緩存，不適用強緩存和緩存協商，每次請求資源都須要發送HTTP到服務器，每次都須要下載完整的資源。
• public：能夠被全部的用戶緩存，包括客戶端和CDN等中間代理服務器。
• private：只容許客戶端緩存，不容許CDN等中間代理服務器對其緩存

Cache-Control與Expires能夠在服務端配置同時啓用，可是Cache-Control的優先級高於Expires

 

2、協商緩存

　　須要由服務器來肯定客戶端緩存資源是否可用。這主要涉及Header中兩組字段：Last-Modified/If-Modified-Since或ETag/If-None-Match，這兩組字段都是成對出現的。若第一次的 響應頭沒有Last-Modified或ETag，則後續的 請求頭部也不會有If-Modified-Since或If-None-Match。

　　Last-Modified/If-Modified-Since：瀏覽器第一次請求一個資源的時候，服務器返回的header中會加上Last-Modified，它是一個時間標識該資源的最後修改時間。當瀏覽器再次請求該資源時，HTTP請求頭部會帶上If-Modified-Since，該值爲上次響應報文頭部的Last-Modified的值，服務器接收到If-Modified-Since，會根據資源的最後修改時間來判斷是否命中協商緩存，若是命中，返回304(Not Modified)，而且不會返回Last-Modified和無響應body。不然返回200,而且返回Last-Modified和有響應的body。

　　ETag/If-None-Match：它們的值不是一個時間標識，而是一個校驗碼。ETag能夠保證每個資源都是惟一的，資源變化都會致使ETag變化，服務器根據接收到的If-None-Match來判斷是否命中協商緩存。可是當服務器返回304的時候，因爲ETag從新生成過(ETag的算法，沒有明確規定，能夠每次生成，也能夠生成後存儲起來)，響應頭部也會帶上ETag，即便它跟以前的沒有變化。

爲何要有ETag？不是已經有Last-Modified嗎。

• 一些文件或許會週期性的修改，可是它的內容沒有變化（只是改變了修改時間），這個時候咱們並不但願客戶端認爲這個文件修改了，而從新獲取。
• 某些文件在1秒內修改了N次，用If-Modified-Since沒法進行區分，由於If-Modified-Since的時間最小單位是秒。
• 某些服務器不能精確的獲得文件的最後修改時間。
• Last-Modified和ETag能夠一塊兒使用，可是ETag的優先級大於Last-Modified，當ETag相同的狀況下，纔會繼續比較Last-Modified，最後才決定是否返回304。

看了這麼多不知道你糊塗沒，下面有兩張圖，經過這兩張圖，你能對瀏覽器的緩存策略有一個新的認識

3、談下瀏覽器緩存和CDN緩存的關係

cdn緩存就是在瀏覽器和服務器間增長的一層緩存，緩存一些html、圖片、css、xml等靜態資源。

無cdn：

　   用戶在瀏覽網站的時候，瀏覽器可以在本地保存網站中的圖片或者其餘文件的副本，這樣用戶再次訪問該網站的時候，瀏覽器就不用再下載所有的文件，減小了下載量意味着提升了頁面加載的速度。

有cdn：

　　若是中間加上一層CDN，那麼用戶瀏覽器與服務器的交互以下：

　　客戶端瀏覽器先檢查是否有本地緩存，是否過時，若是過時，則向CDN邊緣節點發起請求，CDN邊緣節點會檢測用戶請求數據的緩存是否過時，若是沒有過時，則直接響應用戶請求，此時一個完成http請求結束;若是數據已通過期，那麼CDN還須要向源站發出回源請求(back to the source request),來拉取最新的數據。

4、不一樣的瀏覽器操做對應的緩存操做

 

 

瀏覽器緩存刷新 

 

1.  在地址欄中輸入網址後按回車或點擊轉到按鈕

 

瀏覽器以最少的請求來獲取網頁的數據，瀏覽器會對全部沒有過時的內容直接使用本地緩存，從而減小了對瀏覽器的請求。因此，Expires，max-age標記只對這種方式有效。

 

2.  按F5或瀏覽器刷新按鈕

 

瀏覽器會在請求中附加必要的緩存協商，但不容許瀏覽器直接使用本地緩存，它可以讓 Last-Modified、ETag發揮效果，可是對Expires無效。

 

3.  按Ctrl+F5或按Ctrl並點擊刷新按鈕

 

這種方式就是強制刷新，總會發起一個全新的請求，不使用任何緩存。

 

參考：

一、http://blog.csdn.net/kikikind/article/details/6266101

二、http://blog.csdn.net/heluan123132/article/details/72885990

三、http://blog.csdn.net/lu123535884/article/details/51489951

四、http://www.cnblogs.com/slly/p/6732749.html