簡單總結瀏覽器快取

2021-09-09 05:41:35 字數 2672 閱讀 4276

瀏覽器快取

瀏覽器快取是瀏覽器在本地磁碟對使用者最近請求過的文件進行儲存,當訪問者再次訪問同一頁面的時候,瀏覽器可以直接從本地磁碟載入文件。

為什麼要使用瀏覽器快取

瀏覽器快取作為web效能優化的重要方式之一,那麼瀏覽器快取的過程是怎麼樣的呢?

瀏覽器快取過程

在瀏覽器第一次發起請求時,本地無快取,向伺服器傳送請求,瀏覽器端快取伺服器端響應的資料。

那當我們瀏覽器端有快取後,在次發起請求時怎麼讀取快取內容呢?

看圖瀏覽器在第一次請求發生後,再次請求時:

瀏覽器快取分類

強快取:不會向伺服器傳送請求,直接從快取中讀取資源,在chrome控制台的network選項中可以看到該請求返回200的狀態碼;

協商快取:向伺服器傳送請求,伺服器會根據這個請求的request header的一些引數來判斷是否命中協商快取,如果命中,則返回304狀態碼並帶上新的response header通知瀏覽器從快取中讀取資源;

兩者的共同點是,都是從客戶端快取中讀取資源;區別是強快取不會發請求,協商快取會發請求。

強快取

在http1.0中,強制快取通過expires響應頭來實現。head中設定expires過期時間,瀏覽器再次載入資源時,如果請求時間在這個expires時間內,則命中強快取。瀏覽器會直接讀取本地快取資料庫中的資訊(from memory or from disk)。

在http1.1中,強快取使用cache-control來實現。cache-control:當值設為max-age=300時,則代表在這個請求正確返回時間(瀏覽器也會記錄下來)的5分鐘內再次載入資源,就會命中強快取。

cache-control還有另外幾個值可以設定:

private:客戶端可以快取

public:客戶端和**伺服器均可快取;

max-age=***:快取的資源將在 *** 秒後過期;

no-cache:需要使用協商快取來驗證是否過期;

no-store:不可快取

協商快取

在http1.0中, 請求資源時伺服器通過 last-modified 來設定響應頭的快取標識

last-modify/if-modify-since:瀏覽器第一次請求乙個資源的時候,伺服器返回的header中會加上last-modify,last-modify是乙個時間標識該資源的最後修改時間;當瀏覽器再次請求該資源時,request的請求頭中會包含if-modify-since,該值為快取之前返回的last-modify。伺服器收到if-modify-since後,根據資源的最後修改時間判斷是否命中快取

在http1.1中,伺服器使用etag來設定響應頭快取標識。

在第一次請求時,伺服器會將資源和 etag 一併返回給瀏覽器,瀏覽器將兩者快取到本地快取資料庫。

在第二次請求時,瀏覽器會將 etag 資訊放到 if-none-match 請求頭去訪問伺服器,伺服器收到請求後,會將伺服器中的檔案標識與瀏覽器發來的標識進行對比,如果不相同,伺服器返回更新的資源和新的 etag ,如果相同,伺服器返回 304 狀態碼,瀏覽器讀取快取。

etag和last-modified的作用和用法,

他們的區別:

etag要優於last-modified。last-modified的時間單位是秒,如果某個檔案在1秒內改變了多次,那麼他們的last-modified其實並沒有體現出來修改,但是etag每次都會改變確保了精度;

在效能上,etag要遜於last-modified,畢竟last-modified只需要記錄時間,而etag需要伺服器通過演算法來計算出乙個hash值;3.在優先順序上,伺服器校驗優先考慮etag。

頁面重新整理

位址列回車【協商快取和強快取都生效】

瀏覽器發起請求,按照正常流程,本地檢查是否過期,然後伺服器檢查新鮮度,最後返回內容。

重新整理按鈕/f5【只生效協商快取】

瀏覽器直接對本地的快取檔案過期,但是會帶上if-modifed-since,if-none-match,這就意味著伺服器會對檔案檢查新鮮度,返回結果可能是304,也有可能是200。

ctrl + f5 (強制重新整理)【協商快取和強快取都不生效】

瀏覽器不僅會對本地檔案過期,而且不會帶上 if-modifed-since,if-none-match,相當於之前從來沒有請求過,返回結果是200;

使用者行為對快取的影響,用乙個簡單的**總結:

使用者操作

expires/cache-control

last-modied/etag

位址列回車

有效有效

頁面鏈結跳轉

有效有效

新開視窗

有效有效

前進回退

有效有效

f5重新整理

無效有效

ctrl+f5

無效無效

總結快取型別

獲取資源形式

狀態碼傳送請求到伺服器

強快取從快取訪問

200(from cache)

否,直接從快取取

協商快取

從快取訪問

304(not modified)

否,通過伺服器來告知快取是否可用

瀏覽器快取總結

瀏覽器快取主要有兩類 快取協商 last midified etag 徹底快取 cache control,expires b 快取協商 b 的意思是需要去伺服器端詢問頁面有沒有修改過,沒有修改過則返回304直接使用快取內容,否則返回新內容 協商步驟 list 伺服器傳送帶last midified...

簡單理解瀏覽器快取

寫在前面 前段時間公司同事分享了前端快取有關的知識,作為乙個還沒畢業的實習生,聽得我一頭霧水,遂在閒暇之際,自己捋一捋。快取是效能優化中非常重要的一環,快取的意義就在於減少請求,更多地使用本地的資源,給使用者更好的體驗的同時,也減輕伺服器壓力。接下裡從三個部分來說明一下前端的快取。1.強快取 2.協...

瀏覽器快取 簡單介紹

強快取 public 響應會被快取,並且在多使用者間共享。預設是public。private 響應只作為私有的快取,不能在使用者間共享。如果要求http認證,響應會自動設定為private。max age 響應頭設定max age 快取的最大的有效時間,單位為秒 s max age會覆蓋掉expir...