前端面試瀏覽器系列：瀏覽器快取

okfine17發表於2019-04-24
前端面試瀏覽器快取

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

什麼是瀏覽器快取

我們知道，訪問網頁的時候，需要從伺服器下載一些頁面渲染所需的資源，比如html文件，css，js，圖片等，有的資源是很少變動的，比如代表公司的logo圖。如果把這些資源快取下來，很自然減少了伺服器的負載，而且頁面載入時間也會縮短。 但是，要不要使用快取，這個資源瀏覽器又要快取多久，這些瀏覽器怎麼知道？別急，這都是伺服器控制的，http的返回頭（ http response header ）中會有一些欄位來控制，下面我們來具體聊聊這些欄位。

瀏覽器快取分類

1、強快取

強快取是利用 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 優先順序更高。

2、協商快取

協商快取是由伺服器來確定快取資源是否可用，當然了，需要伺服器和客戶端一起配合。伺服器可在 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了。開心，下午看電影去了。晚點抽時間整理下，我之前為了面試準備的複習題目，和大家一起分享，共同進步！

參考資料

站在巨人的肩膀上，讓我看的更遠，謝謝以下文章的作者。
1、瀏覽器快取，想說愛你不容易
2、網站優化：瀏覽器快取控制簡介及配置策略

相關文章