前幾天看到老鐵們分享的面經，談到 http 快取機制的問題，痛下決心，一口氣研究個明白，分享給大家。
前端的發展越來越迅速，能做的事情越來越多，承擔的責任越來越重，通過了解 http 快取機制，可以幫助廣大前端開發工作者提高**的訪問效率，也能有效減輕伺服器的壓力。
http 快取規則
http快取機制有兩種快取規則：強快取 和 對比快取（也有稱為協商快取）， 這個規則是由伺服器響應攜帶的。
第一次請求
無論強快取還是對比快取，瀏覽器第一次請求伺服器時候，都先要到快取資料庫去請求是否有快取資料，返回結果當然是沒有快取資料了~ 然後再去請求伺服器，伺服器的響應資料會攜帶快取規則，告訴客戶端是強快取還是對比快取。如下圖所示：
可是強快取和對比快取到底是什麼？如何判斷是強快取還是對比快取？
強快取
強快取：在乙個有效期時間內，請求快取資料庫中的資料。
伺服器會通過 cache-control: max-age:*** (http 1.1) 或者 expire (http 1.0) 告知瀏覽器請求資料的有效時間，在這個時間內，瀏覽器再次請求這個資料的時候就不用請求伺服器，而是請求快取資料庫裡的資料就好了。如圖：
這樣的好處：
1. 減輕了伺服器的壓力。乙個**會有大量的使用者，海量的請求，伺服器要對其處理和響應，這是乙個巨大的負擔。
2. 瀏覽器得到資料更快。不用等伺服器返回 200 ，直接 304 到快取資料庫中拿資料就好了， 節省了網路傳送延遲等時間。
那麼 cache-control: max-age:*** (http 1.1) 或者 expire (http 1.0) 有什麼區別呢？
cache-control: max-age:*** 是 http 1.1 的內容， expire 是 http 1.0 的內容， expire 是伺服器產生的到期時限，如果本地的時間存在誤差，那麼會造成影響，所以 http 1.1 推出 cache-control 屬性。cache-control: max-age:*** 意為 快取的內容將在 *** 秒後失效。
注意：
cache-control 的優先順序比 expire 高。
強快取當然也存在問題，在這個期限時間內都用快取資料了，那我伺服器更新資料怎麼辦？下面介紹一下對比快取。
對比快取
對比快取需要進行比較判斷是否可以使用快取。通過 cache-control：no-cache 使用對比快取來驗證快取資料。
第一次請求資料的時候，伺服器會將快取標識與資料一起返回給客戶端，客戶端將二者備份至快取資料庫中。再次請求資料時，客戶端將備份的快取標識傳送給伺服器，伺服器根據快取標識進行判斷，判斷成功後，返回304狀態碼，通知客戶端比較成功，可以使用快取資料。
對比快取判斷是否命中通過兩對屬性：
1. last-modified / if-modified-since
比對成功，代表資料未修改過，返回狀態碼 304， 重定向到快取資料庫。
對比失敗，代表資料距離上一次被請求時， 做過修改，就要重新響應資料， 返回 200。
2. etag / if-none-match
etag 是由伺服器產生的乙個唯一標識，伺服器將 etag 返回給客戶端，下一次瀏覽器再次請求會攜帶這個標識，放在 if-none-match 裡，伺服器拿到 if-none-match 後，對比自己的資料標識：
比對成功，代表資料未修改過，返回狀態碼 304， 重定向到快取資料庫。
對比失敗，代表資料距離上一次被請求時， 做過修改，就要重新響應資料， 返回 200。
注意：etag / if-none-match 優先順序高於 last-modified / if-modified-since
總結：
隨著前端技術的進步，前端能夠做的事情越來越多，了解 http 內容好處良多，至少跟後台開發推鍋不至於被牽著鼻子走，哈哈~~~
談談http快取
這部分主要是想談談，關於檔案快取的幾個標誌以及它們的優先順序，另外還想談談 react 中的快取使用 當使用本地快取的時候，可以根據是否需要向伺服器驗證本地快取是否依舊有效，而將快取分為協商快取和強快取，根據名字的字面意思，可以知道那些需要向伺服器驗證的是協商快取。這裡，想簡單聊一下，幾個標註的優先...
Http快取機制
快取快取，就是把需要的東西存起來，不需要每次都去請求。主要目的減小伺服器壓力，放到客戶端上來講，還利於節省流量，還能流暢的把ui顯示出來，提高了使用者體驗。對於http快取來講，主要的就是校驗快取的有效性，也就是新鮮度。如果客戶端不能及時響應服務端的資料變化，快取一直不能被更新，那不就是得不償失了？...
HTTP 快取機制
基於 header的示例 content length 3534http快取策略分為 1 快取策略 cache control 頭里的 public private no cache max age no store 其中no store為不儲存，no cache 0秒的max age 2 快取過期...