強制緩存與協商緩存

Http 緩存機制做爲 web 性能優化的重要手段，對於從事 Web 開發的同窗們來講，應該是知識體系庫中的一個基礎環節，同時對於有志成爲前端架構師的同窗來講是必備的知識技能。可是對於不少前端同窗來講，僅僅只是知道瀏覽器會對請求的靜態文件進行緩存，可是爲何被緩存，緩存是怎樣生效的，卻並非很清楚。在此，我會嘗試用簡單明瞭的文字，像你們系統的介紹HTTP緩存機制，指望對各位正確的理解前端緩存有所幫助。

使用緩存有以下幾個好處：

---

• 緩存減小了冗餘的數據傳輸， 節省了你的網絡費用。
• 緩存緩解了網絡瓶頸的問題。 不須要更多的帶寬就可以更快地加載頁面。
• 緩存下降了對原始服務器的要求。 服務器能夠更快地響應，避免過載的出現。
• 緩存下降了距離時延， 由於從較遠的地方加載頁面會更慢一些。

在介紹HTTP緩存以前，做爲知識鋪墊，先簡單介紹一下HTTP報文

HTTP報文就是瀏覽器和服務器間通訊時發送及響應的數據塊。 瀏覽器向服務器請求數據，發送請求(request)報文；服務器向瀏覽器返回數據，返回響應(response)報文。 報文信息主要分爲兩部分

• 包含屬性的首部(header)--------------------------附加信息（cookie，緩存信息等）與緩存相關的規則信息，均包含在header中
• 包含數據的主體部分(body)-----------------------HTTP請求真正想要傳輸的部分

HTTP緩存有多種規則，根據是否須要從新向服務器發起請求來分類，我將其分爲兩大類(強制緩存，協商緩存)

強制緩存：

強制緩存總體流程比較簡單，就是在第一次訪問服務器取到數據以後，在過時時間以內不會再去重複請求。實現這個流程的核心就是如何知道當前時間是否超過了過時時間。

http 1.0

在 http 1.0 版本中，強制緩存經過 Expires 響應頭來實現。 expires 表示將來資源會過時的時間。也就是說，當發起請求的時間超過了 expires 設定的時間，即表示資源緩存時間到期，會發送請求到服務器從新獲取資源。而若是發起請求的時間在 expires 限定的時間以內，瀏覽器會直接讀取本地緩存數據庫中的信息，兩種方式根據瀏覽器的策略隨機獲取。

http 1.1

在 http 1.1 版本中，強制緩存經過 Cache-Control 響應頭來實現。Cache-Control 擁有多個值：

• private：客戶端能夠緩存
• public：客戶端和代理服務器都可緩存；
• max-age=xxx：緩存的資源將在 xxx 秒後過時；
• no-cache：須要使用協商緩存來驗證是否過時；
• no-store：不可緩存(幾乎不多用)

最經常使用的字段就是 max-age=xxx ，表示緩存的資源將在 xxx 秒後過時。通常來講，爲了兼容，兩個版本的強制緩存都會被實現。最經常使用的字段就是 max-age=xxx ，表示緩存的資源將在 xxx 秒後過時。通常來講，爲了兼容，兩個版本的強制緩存都會被實現。

協商緩存：

瀏覽器第一次請求數據時，服務器會將緩存標識與數據一塊兒返回給客戶端，客戶端將兩者備份至緩存數據庫中。再次請求數據時，客戶端將備份的緩存標識發送給服務器，服務器根據緩存標識進行判斷，判斷成功後，返回304狀態碼，通知客戶端比較成功，可使用緩存數據

• Last-Modified / If-Modified-Since

再次請求服務器時，經過此字段通知服務器上次請求時，服務器返回的資源最後修改時間。 服務器收到請求後發現有頭If-Modified-Since 則與被請求資源的最後修改時間進行比對。 若資源的最後修改時間大於If-Modified-Since，說明資源又被改動過，則響應整片資源內容，返回狀態碼200； 若資源的最後修改時間小於或等於If-Modified-Since，說明資源無新修改，則響應HTTP 304，告知瀏覽器繼續使用所保存的cache。

• Etag/If-None-Match（優先級高於Last-Modified/If-Modified-Since）

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

If-None-Match： 再次請求服務器時，經過此字段通知服務器客戶段緩存數據的惟一標識。 服務器收到請求後發現有頭If-None-Match 則與被請求資源的惟一標識進行比對， 不一樣，說明資源又被改動過，則響應整片資源內容，返回狀態碼200； 相同，說明資源無新修改，則響應HTTP 304，告知瀏覽器繼續使用所保存的cache。