作為一名優秀前端的你是否還不清楚浏覽器的緩存機制？那麼此刻就請看看下面的内容吧~

浏覽器緩存是把雙刃劍，使用得當将極大提升你網頁的用戶體驗，反之則可能制造出pbug

一、浏覽器緩存是什麼

浏覽器緩存是為了加速浏覽，浏覽器在用戶磁盤或内存中對請求過的資源進行存儲，當用戶再次請求相同資源時，浏覽器就會從磁盤或内存中獲取緩存資源而不再向服務端請求，從而節省了網絡請求所花費的時間。

那麼是不是為了達到以上目的，就對資源無腦進行緩存呢？

不是的。比如服務器的資源更新了，但是由于緩存原因，用戶依舊使用的是緩存中的資源，這就會導緻用戶使用的資源不是最新的。

那麼接下來就需要詳細了解浏覽器的緩存流程和機制。

二、浏覽器緩存流程

首先，可以認為浏覽器中有這樣一張映射表，它存儲的是資源（和緩存信息等）與本地磁盤文件的關系。如下圖：

浏覽器緩存映射表

當浏覽器請求“https://xxxx/a.js”時，會先去映射表中查找是否有該資源的緩存信息，如果找到并且緩存時間未過期，那麼就從本地磁盤（或内存）中獲取緩存的資源（比如：C:\xxxx\a.js）。如果映射表中沒有請求資源的緩存信息，那麼就會向服務器請求資源，然後服務器會在響應頭中返回緩存規則給浏覽器，浏覽器再根據它決定是否緩存以及如何緩存該資源。

浏覽器第一次請求資源流程：

浏覽器第一次請求資源流程圖

問：上圖提到的“緩存規則”是什麼呢？

答：它的作用是告訴浏覽器對于該資源是否需要緩存，該如何緩存，緩存多長時間等操作。往下看[靈光一閃]

三、浏覽器緩存規則

浏覽器緩存規則主要有兩類：

• 徹底緩存：expires、cache-control
• 協商緩存：last-modified、etag

如下圖，是一個請求的響應頭（response headers），它就包含了徹底緩存和協商緩存所用到的字段信息。

請求的響應頭信息

什麼是徹底緩存

定義：隻要資源的緩存時間沒有過期，就從緩存中獲取，否則則從服務器獲取

依據：expires、cache-control

早在http1.0時期，使用的是expires字段來規定資源的過期時間，該時間是由服務器産生的絕對時間（GMT格式，如上圖所示），如果客戶端的時間小于該時間，那麼就使用緩存。但是我們都知道客戶端時間是可以手動修改的，這就會導緻可能緩存一直未使用。

為解決以上問題，從http1.1開始使用cache-control來規定徹底緩存規則，如下表所示其值和含義：

cache-control可選值和其含義

還記得“請求的響應頭信息”圖中有個"cache-control: max-age=2678400"嗎？它表示的就是從請求開始到該資源的緩存過期所經曆的秒數為2678400s。

當響應頭中同時含有expires和cache-control時，在使用緩存的判斷上後者的優先級要高于前者。

什麼是協商緩存

定義：請求未命中徹底緩存時，會向服務器發起請求，并在請求頭上攜帶該資源在緩存映射表中的etag和last-modified信息（如果存在的話）。然後浏覽器根據請求的響應狀态碼決定是否使用緩存。

依據：etag、last-modified

特點：不管資源有沒有修改，都會向服務器發起請求

etag：文件的唯一标識，隻要文件修改後，該值就會修改

last-modified：文件的最後修改時間

在第一次請求資源後，浏覽器會将響應中的緩存規則存入緩存映射表。在第二次請求時，如果未命中徹底緩存（比如：max-age過期了，cache-control值為no-cache或no-store），并且緩存信息中含有etag或last-modified信息，浏覽器就會在請求頭上對應的攜帶這樣兩個信息：if-none-match: W/"98e1-lY6zj2gtniVAqQ203cSuog"和if-modified-since: Fri, 25 Jun 2021 16:03:41 GMT。

服務器就會根據這些值和最新的資源所産生的etag和last-modified值做對比，如果發現不相同，則返回最新資源和最新的etag或last-modified，浏覽器将新的緩存規則更新到映射表中。反之則返回304狀态碼，浏覽器就使用緩存數據。

問：為什麼需要etag呢？有了last-modified不就可以了麼？

答：其實主要有兩個原因，第一，有時候文件的内容并未修改，僅僅改變了其修改時間，這時其實還是可以使用緩存的。第二，如果文件修改很頻繁，并且頻率在秒級以下，從“請求的響應頭信息”圖可發現last-modified精度隻能到秒。所以if-modified-since隻能感知秒級的修改。所以etag的存在還是很有必要的。

提示：etag的優先級會高于last-modified

總結

我們用一張流程圖來概括以上所講的浏覽器緩存機制：

浏覽器緩存流程圖

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部