HTTP緩存是WEB性能優化的重要手段
也是WEB工程師的必備知識技能
1. 緩存作用？
降低網絡帶寬消耗；
降低服務器壓力；
降低資源下載延遲，加快頁面響應速度；
2. 本文重點...
瀏覽器會緩存一些東西(CSS、JS、圖片)，那么...
緩存哪些？不緩存哪些？
緩存多長時間？何時過期？
緩存何時更新？
如何不用緩存？
F5、Ctrl+F5有何異同？
....
3. F5、Ctrl+F5有何異同？
先來感受一波瀏覽器緩存機制；
測試環境：IE11、Firefox、Chrome、Opera
分析工具：Fiddler
測試代碼：
測試場景：
下面直接曬測試結果...
場景1：首次加載資源（瀏覽器無緩存）
各瀏覽器表現一致，從服務器端下載完整資源，響應碼200。
場景2：地址欄按ENTER重新加載
各瀏覽器會向服務器確認自身緩存是否過期，服務器若發現資源未改變，則響應304，指示瀏覽器可繼續使用自身緩存，無需重新下載資源。
注：IE/Firefox的請求頭一樣；Chrome/Opera的請求頭一樣；
場景3、場景4：按F5、刷新按鈕
與在地址欄按ENTER類似，各瀏覽器會向服務器確認自身緩存是否還可以繼續使用。
場景5：按Ctrl+F5
按Ctrl+F5，瀏覽器會放棄自身緩存，重新從服務器下載資源。
4. HTTP緩存體系
下面展開講解
If-Modified-Since、ETag、304、412
等內容
4.1. 瀏覽器緩存使用流程
注：GET請求才會涉及緩存問題，瀏覽器不會緩存POST請求；
4.2. 三大緩存策略
1. 緩存存儲策略：
用於決定 HTTP 響應內容是否可被瀏覽器緩存。
響應首部：
Cache-Control:no-store，禁止瀏覽器緩存響應內容；
示例：禁止瀏覽器緩存CSS、JS、PNG、HTML文件
2. “新鮮度檢驗”策略：
HTTP可以指定緩存的過期時間，未過期的緩存是“新鮮的”，可以在不聯系服務器的情況下，直接使用緩存。
響應首部：
Cache-Control:max-age=，HTTP1.1，定義緩存的最大有效期（秒）；
Expires:, HTTP1.0,定義緩存過期的絕對日期；
注1：建議給JS、CSS、PNG等靜態資源設定一個較大的緩存過期時間，最大限度利用緩存，減少HTTP請求量；
注2：若響應中含有Cache-Control:max-age=0或Cache-Control:no-cache或Pragma:no-cache，可使瀏覽器在每次使用緩存前，都去跟服務器確認緩存的可用性；
注3：請求中也可攜帶Cache-Control:no-cache或Pragma:no-cache，這樣會迫使服務器不返回緩存文件；（瀏覽器的Ctrl+F5原理）
Cache-Control
HTTP1.1引入了Cathe-Control，它使用max-age指定組件被緩存多久（時間相對請求的時間），從請求開始在max-age時間內瀏覽器使用緩存，之外的使用請求，這樣就可以消除Expires的限制。但有個缺點就是，用戶不能第一時間拿到最新修改的文件。請求過程如下：
示例：使瀏覽器使用緩存前，必須去確認有效性；
3. “服務器再驗證”策略：
“不新鮮”的緩存並不一定意味着它和服務器上的文件有差異，只意味着需要同服務器確認一下緩存是否有更新的必要。
響應首部：
Last-Modified:，文件上次修改時間；
ETag:，文件的指紋信息；
請求首部：
If-Modified-Since:，若文件從指定日期后被改過，就返回新的文件；否則只響應304，指示瀏覽器緩存仍可繼續使用；與Last-Modified配合使用；
If-None-Match:，若與服務器端文件指紋不匹配，就返回新的文件；否則只響應304，指示瀏覽器緩存仍可繼續使用；與ETag配合使用；
5. 412響應代表什么？
412
Precondition Failed
先決條件失敗
響應示例：
響應時機：
會在緩存條件檢測失敗時返回412響應碼，例如：
注：如何清理各瀏覽器緩存？
各瀏覽器都可通過[Ctrl+Shift+Delete]快捷鍵完成緩存清理。
參考：
本頁來源網絡，具體查看以下鏈接，我只是個搬運工~~
https://cloud.tencent.com/developer/news/103470
https://www.cnblogs.com/shuimuzhushui/p/9689550.html