http學習之路
摘要
在請求的頁面裏有些靜態文件（圖片，css，js）不是常常變化的，將這些文件存儲起來，也是客戶端優化用戶瀏覽體驗的一個好方法。http緩存做爲web性能優化的重要手段，可是對於前端來講只是知道瀏覽器會對靜態文件進行緩存，但爲何被緩存，緩存是怎麼失效的並不清楚。下面爲你們介紹http的緩存機制。
http緩存分類
緩存分爲強制緩存和協商緩存，強制緩存在緩存數據未失效狀況下，不須要和服務器進行交互。而協商緩存須要進行和服務器進行比較和判斷是否進行緩存。
兩種緩存同時存在的狀況下，強制緩存優先於協商緩存。
強制緩存
1. Expires
expires的值是告訴瀏覽器的緩存過時時間（值爲GMT時間，即格林尼治時間），即下次請求時，沒有到達過時時間，瀏覽器會直接使用緩存數據。
雖然這種方式添加了緩存控制，節省了流量，但仍是存在不少問題
(1)
因爲客戶端時間是服務器沒辦法控制的時間，假如用戶改變了客戶端時間，就可能形成一些緩存的更新不及時
(2)
緩存過時後，無論文件有咩有發生變化，瀏覽器都會從新請求服務器
2. Catch-Control
針對以上瀏覽器和服務器時間不一致問題，加入了新的緩存方案，服務器不直接告訴瀏覽器過時時間，而是告訴瀏覽器一個相對時間Cache-Control=10秒，意思是10秒內，直接使用瀏覽器緩存。css
協商緩存
強制緩存的弊端很明顯，都是經過時間判斷是否請求服務器加載，可是若是文件沒有發生變化，就會形成浪費服務器的資源。
協商緩存有兩組報文結合使用
Last-modified
爲了節省服務器資源，再次改變方案。瀏覽器和服務器協商，服務器每次返回文件時，都會告訴瀏覽器文件在服務器上最近修改的時間，請求的過程以下：前端
- 瀏覽器請求靜態資源Demo.png
- 服務器讀取磁盤，返回給瀏覽器文件，並帶上文件上次修改時間Last-Modified（GMT標準格式）
- 當瀏覽器緩存文件過時時，瀏覽器會帶上If-Modified-since(等於上次請求的last-modified）請求服務器。
- 服務器比較請求頭裏的If-modified-since和文件上次修改的時間，若是文件一致就繼續使用瀏覽器的緩存（304），不一致就從新請求服務器並返回last-modified
- 循環請求。。。。
雖然這個方式比上面三個方式都有進一步的優化，瀏覽器檢測文件是否有變化，若是沒有變化，就直接使用緩存文件仍是有些問題：
- last-modified是使用（GMT)時間，只能精確到秒，若是文件在一秒以內改變不少次，瀏覽器就沒辦法去識別並請求新的文件。
- 若是文件通過屢次修改，可是內容沒有變化，服務器須要從新返回請求文件。
Etag
爲了解決文件修改時間不精確的問題，瀏覽器再和服務器進行協商，此次不返回時間，返回文件惟一標識Etag，只有當文件內容改變時，Etag纔會改變。請求過程以下：web
- 瀏覽器請求靜態資源demo.png
- 服務器讀取磁盤，把demo.png文件返回給瀏覽器，並帶上文件的惟一標識Etag
- 當瀏覽器的緩存文件過時時，瀏覽器帶上If-None-Match（等於上次上次的Etag）再次請求服務器
- 服務器比較請求頭的If-None_Match和文件的Etag，若是一致就繼續使用緩存文件（304），不一致帶上Etag從新請求服務器。
- 循環請求。。。
關於Pragma
當該字段值爲no-cache的時候，會告訴瀏覽器不要對該資源緩存，即每次都得向服務器發一次請求才行。
res.setHeader('Pragma', 'no-cache') //禁止緩存
res.setHeader('Cache-Control', 'public,max-age=120') //2分鐘複製代碼
經過Pragma來禁止緩存，經過Cache-Control設置兩分鐘緩存，可是從新訪問咱們會發現瀏覽器會再次發起一次請求，說明了Pragma的優先級高於Cache-Control
關於Cache-Control
咱們看到Cache-Control中有一個屬性是public，那麼這表明了什麼意思呢？其實Cache-Control不光有max-age，它常見的取值private、public、no-cache、max-age，no-store，默認值爲private，各個取值的含義以下：
- private: 客戶端能夠緩存
- public: 客戶端和代理服務器均可緩存
- max-age=xxx: 緩存的內容將在 xxx 秒後失效
- no-cache: 須要使用對比緩存來驗證緩存數據
- no-store: 全部內容都不會緩存，強制緩存，對比緩存都不會觸發
因此咱們在刷新頁面的時候，若是隻按F5只是單純的發送請求，按Ctrl+F5會發現請求頭上多了兩個字段Pragma: no-cache和Cache-Control: no-cache。
緩存的優先級
上面咱們說過強制緩存的優先級高於協商緩存，Pragma的優先級高於Cache-Control，那麼其餘緩存的優先級順序怎麼樣呢？網上查閱了資料得出如下順序（PS：有興趣的童鞋能夠驗證一下正確性告訴我）：
Pragma > Cache-Control > Expires > ETag > Last-Modified
