資訊專欄INFORMATION COLUMN
摘要：原文鏈接關于瀏覽器緩存我知道多少歡迎在前端開發中，我們在提到性能優化的時候總會提到一點合理設置緩存。如果相等，則說明資源未修改，返回，瀏覽器使用本地緩存。
原文鏈接：關于瀏覽器緩存我知道多少
歡迎star~
在前端開發中，我們在提到性能優化的時候總會提到一點：合理設置緩存。我們該如何從這方面入手來考慮提高網站性能呢？
前言我們都知道 HTML5 引入了應用程序緩存，可以在沒有網絡的情況下進行訪問，同時，HTML5 還引入了 storage 本地存儲。這些都屬于應用緩存。
本篇文章主要內容是和瀏覽器緩存相關的，也可以說是 HTTP 緩存。
什么是瀏覽器緩存MDN 上是這樣解釋瀏覽器緩存的：
A browser cache holds all document downloaded via HTTP by the user 。。。 without requiring an additional trip to the server.
意思就是，瀏覽器緩存保存著用戶通過 HTTP 獲取的所有資源，再下一次請求時可以避免重復向服務器發出多余的請求。
通俗的說，就是在你訪問過一次某個網站之后，這個站點的文字、圖片等所有資源都被下載到本地了，下次再訪問該網站時判斷是否滿足緩存條件，如果滿足就不用再花費時間去等待資源的獲取了。
瀏覽器緩存的分類一般來說瀏覽器緩存可以分為兩類：
強緩存
協商緩存（對比緩存）
我們需要知道的是，瀏覽器在加載資源時，會先判斷是否命中強緩存再驗證是命中協商緩存。
其它的的具體細節，稍后會展開來說。
強緩存瀏覽器在加載資源時，會先根據本地緩存資源的 header 中的信息判斷是否命中強緩存，如果命中則直接使用緩存中的資源不會再向服務器發送請求。
從圖中可以看出，強緩存一般是這樣一個流程：
查看 header 頭中的 Expire 和 Cache-control 來判斷是否滿足規則；
如果滿足規則，就返回緩存的數據；
如果不滿足規則，就向服務器發送請求；
服務器返回數據；
將新數據存入緩存。
所以我們主要就是關注 Expire 和 Cache-control 這兩個字段。
Expire同樣地，我們看看MDN中如何解釋這個字段：
The Expires header contains the date/time after which the response is considered stale.
這個字段包含了一個時間，過了這個時間，響應將會失效。
也就是說，Expire 這個字段表示緩存到期時間，我們來打開一個網站并查看 Response Header 看看這個字段：
Expires:Fri, 27 Oct 2017 07:55:30 GMT
可能在你查看這的時候發現時間不對啊，怎么都已經是過去了 ~
GMT 表示的是格林威治時間，和北京時間相差8小時。
上面的這個時間表示的是 2017年10月27日15:55:30。
通過設置 Expire 來設置緩存有一個致命缺點：
可以看出，這個是個絕對時間，也就是說，如果我修改了客戶端的本地時間，是不是就會導致判斷緩存失效了呢。
Cache-Control既然不能設置絕對時間，那我就設置個相對時間唄。
在 HTTP/1.1 中，增加了一個字段 Cache-Control ，它包含一個 max-age 屬性，該字段表示資源緩存的最大有效時間，這就是一個相對時間。
Cache-Control:max-age=600
這個表示的就是最大有效時間是 600s ，對的，它的單位是秒。
Cache-Control 除了 max-age 屬性之外還有一些屬性：
no-cache：需要進行協商緩存，發送請求到服務器確認是否使用緩存。
no-store：禁止使用緩存，每一次都要重新請求數據。
public：默認設置。
private：不能被多用戶共享。
現在基本上都會同時設置 Expire 和 Cache-Control ，Cache-Control 的優先級別更高。
協商緩存當強緩存沒有命中的時候，瀏覽器會發送一個請求到服務器，服務器根據請求頭中的部分信息來判斷是否命中緩存。如果命中，則返回 304 ，告訴瀏覽器資源未更新，可使用本地的緩存。
從圖中可以看出，協商緩存一般是這樣一個流程：
把資源標識，比如 If-Modify-Since 或 Etag 發送到服務器，確認資源是否更新；
如果資源未更新，請求響應返回的http狀態為 304 并且會顯示一個 Not Modified 的字符串，告訴瀏覽器使用本地緩存;
如果資源已經更新，返回新的數據；
將新數據存入緩存。
Last-Modified，If-Modified-Since瀏覽器第一次請求資源的時候，服務器返回的 header 上會帶有一個 Last-Modified 字段，表示資源最后修改的時間。
Last-Modified: Fri, 27 Oct 2017 07:55:30 GMT
同樣的，這是一個 GMT 的絕對時間。
當瀏覽器再次請求該資源時，請求頭中會帶有一個 If-Modified-Since 字段，這個值是第一次請求返回的 Last-Modified 的值。服務器收到這個請求后，將 If-Modified-Since 和當前的 Last-Modified 進行對比。如果相等，則說明資源未修改，返回 304，瀏覽器使用本地緩存。
well，這個方法也是有缺點的：
最小單位是秒。也就是說如果我短時間內資源發生了改變，Last-Modified 并不會發生變化；
周期性變化。如果這個資源在一個周期內修改回原來的樣子了，我們認為是可以使用緩存的，但是 Last-Modified 可不這樣認為。
所以，后來又引入一個 Etag。
EtagEtag 一般是由文件內容 hash 生成的，也就是說它可以保證資源的唯一性，資源發生改變就會導致 Etag 發生改變。
同樣地，在瀏覽器第一次請求資源時，服務器會返回一個 Etag 標識。當再次請求該資源時， 會通過 If-no-match 字段將 Etag 發送回服務器，然后服務器進行比較，如果相等，則返回 304 表示未修改。
Last-Modified 和 Etag 是可以同時設置的，服務器會優先校驗 Etag，如果 Etag 相等就會繼續比對 Last-Modified，最后才會決定是否返回 304。
總結當瀏覽器再次訪問一個已經訪問過的資源時，它會這樣做：
看看是否命中強緩存，如果命中，就直接使用緩存了；
如果沒有命中強緩存，就發請求到服務器檢查是否命中協商緩存；
如果命中協商緩存，服務器會返回 304 告訴瀏覽器使用本地緩存；
否則，返回最新的資源。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/61894.html
摘要：在一個成熟的系統中，能夠運用到緩存的地方其實并不是一處。那么在以終端用戶為起點，系統所用的數據庫為終點的這條道路上可以作為緩存設立點的位置大致有以下這些。緩存也有一系列的副作用需要考慮。 如果這是第二次看到我的文章，歡迎文末掃碼訂閱我個人的公眾號（跨界架構師）喲~ 本文長度為3578字，建議閱讀10分鐘。堅持原創，每一篇都是用心之作～ 此前的「伸縮性」章節結束了，此文是「高性能」章...
答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@?？途W發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...
答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@?？途W發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...
閱讀 3409·2021-09-22 16:00
閱讀 3452·2021-09-07 10:26
閱讀 2989·2019-08-30 15:55
閱讀 2858·2019-08-30 13:48
閱讀 1366·2019-08-30 12:58
閱讀 2162·2019-08-30 11:15
閱讀 945·2019-08-30 11:08
閱讀 525·2019-08-29 18:41
