強制緩存和協商緩存有什麼區別

1.背景介紹

作前端有兩個比較使人頭痛的事，一個是命名，另外一個就是緩存了。HTTP協議提供了很是強大的緩存機制， 瞭解這些緩存機制，對提升網站的性能很是有幫助。

2.知識剖析

什麼是瀏覽器緩存

瀏覽器緩存(Brower Caching)是瀏覽器在本地磁盤對用戶最近請求過的文檔進行存儲，當訪問者再次訪問同一頁面時，瀏覽器就能夠直接從本地磁盤加載文檔。

瀏覽器是如何判斷是否使用緩存的

瀏覽器緩存的優勢有：

1.減小了冗餘的數據傳輸，節省了網費

2.減小了服務器的負擔，大大提高了網站的性能

3.加快了客戶端加載網頁的速度

瀏覽器緩存主要有兩類：緩存協商和完全緩存，也有稱之爲協商緩存和強緩存。

1.強緩存：不會向服務器發送請求，直接從緩存中讀取資源，在chrome控制檯的network選項中能夠看到該請求返回200的狀態碼;

2.協商緩存：向服務器發送請求，服務器會根據這個請求的request header的一些參數來判斷是否命中協商緩存，若是命中，則返回304狀態碼並帶上新的response header通知瀏覽器從緩存中讀取資源；

二者的共同點是，都是從客戶端緩存中讀取資源；區別是強緩存不會發請求，協商緩存會發請求。

緩存中header的參數：

強制緩存

Expires：response header裏的過時時間，瀏覽器再次加載資源時，若是在這個過時時間內，則命中強緩存。

Cache-Control：當值設爲max-age=300時，則表明在這個請求正確返回時間（瀏覽器也會記錄下來）的5分鐘內再次加載資源，就會命中強緩存。

cache-control除了該字段外，還有下面幾個比較經常使用的設置值：

-no-cache：不使用本地緩存。須要使用緩存協商，先與服務器確認返回的響應是否被更改，若是以前的響應中存在ETag，那麼請求的時候會與服務端驗證，若是資源未被更改，則能夠避免從新下載。

-no-store：直接禁止瀏覽器緩存數據，每次用戶請求該資源，都會向服務器發送一個請求，每次都會下載完整的資源。

-public：能夠被全部的用戶緩存，包括終端用戶和CDN等中間代理服務器。

-private：只能被終端用戶的瀏覽器緩存，不容許CDN等中繼緩存服務器對其緩存。

協商緩存

Last-Modify/If-Modify-Since：瀏覽器第一次請求一個資源的時候，服務器返回的header中會加上Last-Modify，Last-modify是一個時間標識該資源的最後修改時間；當瀏覽器再次請求該資源時，request的請求頭中會包含If-Modify-Since，該值爲緩存以前返回的Last-Modify。服務器收到If-Modify-Since後，根據資源的最後修改時間判斷是否命中緩存

Etag：web服務器響應請求時，告訴瀏覽器當前資源在服務器的惟一標識（生成規則由服務器決定）。

If-None-Match：當資源過時時（使用Cache-Control標識的max-age），發現資源具備Etage聲明，則再次向web服務器請求時帶上頭If-None-Match （Etag的值）。web服務器收到請求後發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對，決定是否命中協商緩存；

ETag和Last-Modified的做用和用法，他們的區別：

1.Etag要優於Last-Modified。Last-Modified的時間單位是秒，若是某個文件在1秒內改變了屢次，那麼他們的Last-Modified其實並無體現出來修改，可是Etag每次都會改變確保了精度；

2.在性能上，Etag要遜於Last-Modified，畢竟Last-Modified只須要記錄時間，而Etag須要服務器經過算法來計算出一個hash值；

3.在優先級上，服務器校驗優先考慮Etag。

瀏覽器緩存過程

1.瀏覽器第一次加載資源，服務器返回200，瀏覽器將資源文件從服務器上請求下載下來，並把response header及該請求的返回時間一併緩存；

2.下一次加載資源時，先比較當前時間和上一次返回200時的時間差，若是沒有超過cache-control設置的max-age，則沒有過時，命中強緩存，不發請求直接從本地緩存讀取該文件（若是瀏覽器不支持HTTP1.1，則用expires判斷是否過時）；若是時間過時，則向服務器發送header帶有If-None-Match和If-Modified-Since的請求

3.服務器收到請求後，優先根據Etag的值判斷被請求的文件有沒有作修改，Etag值一致則沒有修改，命中協商緩存，返回304；若是不一致則有改動，直接返回新的資源文件帶上新的Etag值並返回200；；

4.若是服務器收到的請求沒有Etag值，則將If-Modified-Since和被請求文件的最後修改時間作比對，一致則命中協商緩存，返回304；不一致則返回新的last-modified和文件並返回200；；

3.常見問題

用戶行爲對瀏覽器緩存的影響

4.解決方案

點擊刷新按鈕或者按F5

瀏覽器直接對本地的緩存文件過時，可是會帶上If-Modifed-Since，If-None-Match,這就意味着服務器會對文件檢查新鮮度，返回結果多是304，也有多是200.

用戶按Ctrl+F5（強制刷新）

瀏覽器不只會對本地文件過時，並且不會帶上 If-Modifed-Since，If-None-Match，至關於以前歷來沒有請求過，返回結果是200.

地址欄回車

瀏覽器發起請求，按照正常流程，本地檢查是否過時，而後服務器檢查新鮮度，最後返回內容。

5.編碼實戰

6.擴展思考

爲何修真院官網請求文件後面加上?ver=49

客戶端會緩存這些css或js文件，所以每次升級了js或css文件後，改變版本號，客戶端瀏覽器就會從新下載新的js或css文件 ，刷性緩存的做用。你們可能有時候發現修改了樣式或者js，刷新的時候不變，就是客戶端緩存了css或者js文件

7.參考文獻

參考一：http強制緩存和協議緩存http://www.cnblogs.com/wonyun/p/5524617.html

8.更多討論

其餘的常見瀏覽器狀態

400 Bad Request

一、語義有誤，當前請求沒法被服務器理解。除非進行修改，不然客戶端不該該重複提交這個請求。

二、請求參數有誤。

415 Unsupported Media Type

對於當前請求的方法和所請求的資源，請求中提交的實體並非服務器中所支持的格式，所以請求被拒絕。