1、前端緩存
前端緩存可分為：http 緩存瀏覽器緩存
今天主要講的就是 http 緩存2、HTTP 緩存
什麼是 HTTP 緩存HTTP 緩存指的是，客戶端向伺服器請求數據時，會先抵達瀏覽器緩存，如果瀏覽器有這個需要請求的資源的副本，就可以直接從瀏覽器的緩存中提取這個資源，而不用花費更多時間再從對應的伺服器獲取數據。常見的 HTTP 緩存只能緩存 get 請求響應的資源HTTP 緩存都是從第二次請求開始的。第一次請求資源時，伺服器返回對應資源，並在 response header 頭中回傳資源的緩存數據；第二次請求，瀏覽器通過判斷請求參數，命中強緩存就直接 200，否則就把請求參數到 request header 頭中傳給伺服器，查看是否命中協商緩存，命中則返回 304，否則伺服器會返回全新的資源HTTP 緩存分類根據是否需要再次向伺服器發起請求來判斷分類，分為強緩存和協商緩存。強緩存如果生效，就無須再與伺服器發生交互協商緩存不管是否生效，都需要與伺服器發生交互強緩存 與 協商緩存 的對比：
關於強緩存強緩存在緩存數據還未失效的情況下（也就是 Cache-Control 的 max-age 或者 Expires 的事件沒有過期、失效），那麼就會直接使用瀏覽器的緩存數據，不會再向伺服器發送任何請求。強緩存生效時，返回的 http 狀態碼是 200，這種響應下的頁面的加載速度是最快的。但是，如果在這個設定的時間內，伺服器端的資源進行修改，那麼頁面上是拿不到這部分更新的數據的，因為它不會再與瀏覽器產生交互。強緩存相關 header 頭屬性Pragma （在 HTTP 1.1 中被遺棄）Cache-Control：設置過期時間（絕對時間、時間點），超過了這個時間點就代表資源過期。但是用戶的本地時間是可以自行調整的，所以會出現問題Expires：設置過期時長（相對時間、時間段），指定一個時間長度，跟本地時間無關，在這個時間段內緩存是有效的。三者的優先級為（從高到低）：Pragma > Cache-Control > Expires關於協商緩存當第一次請求伺服器時，返回的響應頭中沒有設置 Cache-Control 和 Expires，或者是 Cache-Control 和 Expires 已經過期的情況下，瀏覽器的第二次請求就會與伺服器進行協商，與伺服器端資源對比，判斷是使用瀏覽器中的緩存數據還是重新發送資源給瀏覽器。如果伺服器端的資源沒有更新修改，那麼返回的 http 狀態碼為 304，告訴瀏覽器可以使用緩存的數據。如果伺服器的資源更新了，就會返回狀態碼 200，把更新後的資源與緩存信息一起發送給瀏覽器。協商緩存的相關 header 頭屬性有：ETagIf-Not-Match協商緩存的執行流程：瀏覽器第一次向伺服器發送請求時，會在響應頭返回協商緩存的頭屬性：ETga 和 Last-Modified（目前不再使用）其中 ETag 是瀏覽器當前資源在伺服器的唯一標識，其生成規則由伺服器決定。當瀏覽器在第二次向伺服器發送請求時，會在請求頭上帶上與 ETag 對應的值。伺服器在接收到 ETag 值後會進行比較，如果返回 304，則說明資源沒有更改，瀏覽器可以在緩存中讀取數據。否則，伺服器會直接返回更新後的資源3、為什麼要使用 HTTP 緩存
HTTP 緩存的好處？減少亢餘的數據傳輸，節約資源緩解伺服器壓力，提高網站性能加快客戶加載網頁的速度4、不想使用緩存的幾種方式
Ctrl + F5強制刷新，都會直接向伺服器提取數據。按F5刷新或瀏覽器的刷新按鈕，默認加上Cache-Control：max-age=0，即會走協商緩存。５、HTTP緩存的注意點
儘量減少 304 的請求，因為我們知道，協商緩存每次都會與後臺伺服器進行交互，所以性能上不是很好。從性能上來看儘量多使用強緩存。6、總結：
對於強制緩存，伺服器通知瀏覽器一個緩存時間，在緩存時間內，下次請求，直接用緩存，不在時間內，執行協商緩存策略。對於協商緩存，將緩存信息中的 Etag 通過請求發送給伺服器，由伺服器校驗，返回304狀態碼時，瀏覽器直接使用緩存，否則伺服器重新發送數據資源給瀏覽器。流程圖第一次請求
第二次請求
最後，咱給小編：
1. 點讚+評論
2. 點頭像關注，轉發給有需要的朋友。
謝謝！！