前端面試瀏覽器系列：瀏覽器緩存

在最近的面試中，發現屢次被問到關於瀏覽器緩存的知識。畢竟緩存是前端性能優化中一個蠻重要的點，雖然我很懶，可是仍是打算抽出一些時間對知識點作了下整理，今天終於行動起來！

什麼是瀏覽器緩存

咱們知道，訪問網頁的時候，須要從服務器下載一些頁面渲染所需的資源，好比html文檔，css，js，圖片等，有的資源是不多變更的，好比表明公司的logo圖。若是把這些資源緩存下來，很天然減小了服務器的負載，並且頁面加載時間也會縮短。 可是，要不要使用緩存，這個資源瀏覽器又要緩存多久，這些瀏覽器怎麼知道？別急，這都是服務器控制的，http的返回頭（ http response header ）中會有一些字段來控制，下面咱們來具體聊聊這些字段。

瀏覽器緩存分類

一、強緩存

強緩存是利用 Expires 和 Cache-Control 這2個字段來控制的，控制資源緩存的時間，在有效期內不會去向服務器請求了。

• Expires Expires 的值爲一個絕對時間，是GMT格式（GMT時間就是英國格林威治時間，GMT時間 = 北京時間 - 8小時）的時間字符串，指的是緩存的具體過時時間，它描述的是時刻，是一個時間點。

Expires: Wed, 25 Jul 2028 19:19:42 GMT
複製代碼

表示資源會在2028-07-25 19:19:42後過時，到時候須要再次請求資源了。因爲 Expires 是依賴於客戶端系統時間，當修改了本地時間後，緩存可能會失效，因此通常狀況，咱們認爲使用 Cache-Control 是更好的選擇。

• Cache-Control 給 Cache-Control 設置 max-age ，表示緩存的最長時間是多少秒，定義的是時間的長短，它描述的是時間，表示的是一段時間間距，是一個相對時間。好比我想設置這個資源有效時間是3天，那麼 max-age 的值就是259200（3 * 24 * 60 * 60 = 259200）。

Cache-control: max-age=259200
複製代碼

表示資源3天后過時，須要向服務器再次請求資源了。

Cache-Control 與 Expires 能夠在服務端配置同時啓用，也就是說在 response header 中，Expires 和Cache-Control 是能夠同時存在，當它們同時啓用的時候Cache-Control 優先級更高。

二、協商緩存

協商緩存是由服務器來肯定緩存資源是否可用，固然了，須要服務器和客戶端一塊兒配合。服務器可在 response header 中包含Last-Modified字段或者ETag字段。

• Last-Modified / If-Modified-Since
  Last-Modified 表示被請求資源在服務器端的最後一次修改時間，當再次請求該資源的時候，瀏覽器的request header中會帶上If-Modified-Since，向服務器詢問該資源是否有更新。
• ETag/If-None-Match
  每次文件修改後服務端那邊會生成一個新的 ETag ，是一個惟一文件標識符，當再次請求該資源時候，瀏覽器的request header中會帶上If-None-Match ，這值就是以前返回的ETag ，把這個值發送到服務器，詢問該資源 ETag 是否變更，有變更的話，說明該資源版本須要更新啦，客戶端不能繼續用緩存裏的數據了。

瀏覽器緩存機制

不知道前面內容我是否表達清楚了，沒事，我在這裏再作個總結吧。總之，瀏覽器會根據 http response header 中的 Expires 和cahe-control 字段判斷是否命中強緩存，如若命中，則直接從緩存中取資源，不會再去向服務器請求了。不然（沒有命中強緩存），瀏覽器會發出一個條件請求，瀏覽器會在請求頭中包含 If-Modified-Since 或 If-None-Match 字段，If-Modified-Since 即瀏覽器當初獲得的 Last-Modified；If-None-Match即瀏覽器當初獲得的 ETag。當服務器發現資源的更新時間晚於 If-Modified-Since 所提供的時間，或者資源在服務器端當前的 ETag 和 If-None-Match 提供的不符時，說明該資源須要向服務器從新請求了。不然，瀏覽器將不須要從新下載整個資源，只須要從緩存中去加載這個資源，這時響應的http code 爲 304（304 Not Modified）。

用戶的各類操做對緩存的影響

面試時候，有被問到用戶進行一些操做的時候，對緩存是有什麼影響的，以下。

用戶操做	Expires/Cache-Control	Last-Modified/Etag
地址欄回車	☑️	☑️
頁面連接跳轉	☑️	☑️
新開窗口	☑️	☑️
前進回退	☑️	☑️
F5刷新	✖️	☑️
Ctrl+F5強制刷新	✖️	✖️

後記

最近由於準備面試，因此打算整理下知識點，方便進行知識整理鞏固，文中若有不正確的地方，煩請溫柔的批評指正～
PS: 在這個2019年寒冬，我這個前端古力師，終於收穫到滿意的offer了。開心，下午看電影去了。晚點抽時間整理下，我以前爲了面試準備的複習題目，和你們一塊兒分享，共同進步！

參考資料

站在巨人的肩膀上，讓我看的更遠，謝謝如下文章的做者。
一、瀏覽器緩存，想說愛你不容易
二、網站優化：瀏覽器緩存控制簡介及配置策略