HTTP 瀏覽器緩存

BOSS提需求，說頁面加載比較慢

看了一下HTTP請求，竟然有一個2.1MB的圖片，加載這個圖片須要 5秒多 的時間，而後再次請求，仍是從服務器拉取的，沒有緩存到瀏覽器端

目前的這個項目，縮略圖都是直接調用的PHP方法生成的縮略圖，沒有永久生成縮略圖靜態文件（如今文件管理還比較簡陋，沒有單獨的服務器），並且以前維護項目的程序員也沒有對header進行處理。
因而本身找了一些資料，總結一下

---

HTTP和緩存有關的 響應header聲明 有 Expires，Cache-control，Last-Modified，Etag
其中 Expires 是 HTTP1.0的內容，若是同時 Expires 和 Cache-control:max-age 存在的話，Expires會被覆蓋

Cache-control 主要的就是 max-age： Cache-control:max-age={有效時間} ，有效時間內，會直接使用本地緩存，超過有效期，則從服務器拉取數據。

Last-Modified：是標示這個響應資源的最後修改時間，是基於Cache-control的一個更加有效的緩存控制，

當 相應header存在 Last-Modified 時候，再次請求的時候，若是資源過時(max-age過時)，則會帶上 If-Modified-Since，值爲上一次訪問此資源的 Last-Modified 的值，若是資源沒有改變，則返回304；

Etag: web服務器響應請求時，告訴瀏覽器當前資源在服務器的惟一標識（生成規則由服務器決定），生成算法的話，我測試etag效果的時候用的是MD5值，Apache能夠配置對靜態文件生成Etag

當 相應header存在 Etag 時候，再次請求此資源的時候，若是資源過時(max-age過時)，則會帶上 If-None-Match，值爲上一次訪問此資源的 Etag 的值，若是從新計算Etag符合結果的話，則返回304；

另外還有一點須要注意（瀏覽器爲chrome）
Cache-control：max-age 過時以前，都是讀取本地緩存，而且沒有向服務器發送請求。瀏覽器刷新的話，無論過不過時，都會從服務器加載數據
Last-Modified 和 Etag：文件過時後，每次都會向服務器請求，若是不變則返回狀態嗎304，不然 爲200，並傳輸消息體；刷新和地址欄輸入效果同樣
若是是CTRL+F5強制刷新的話，全部的資源都會從新從服務器加載

---

參考

1. 瀏覽器緩存機制-Laruence

2. Cache-Control: no-cache,Cache-Control: no-store,Pragma: no-cache區別

3. 瀏覽器 HTTP 協議緩存機制詳解