瀏覽器快取小結

2021-09-16 23:42:07 字數 1733 閱讀 8279

因為最近面試經常會被問到304快取的問題,因此在網上蒐集了各種資料,小記一下

快取有瀏覽器快取,**伺服器快取,服務端快取等,這裡著重記一下瀏覽器快取

瀏覽器第一次像伺服器發起請求時,如果有快取,瀏覽器在返回資訊裡面會帶上相應的快取策略,下面介紹一下有哪些常用的快取策略。

expires 過期時間,這是http1.0就有的。客戶端在首次請求伺服器資源的時候伺服器設定乙個資源的過期時間,這個時間是絕對的,如果設定的快取策略是這個,那麼瀏覽器再次請求的時候會跟所請求資源的過期時間比對一下,如果在過期時間之內,那麼從本地讀取,否則會看看是否設定了其他快取策略,按照其他策略來,沒有的話就向伺服器發起請求了。我們可以看出,這個是否發起請求跟客戶端本地時間有很大關係,如果時間設定的不對,那麼快取策略就有可能失效。

cache-control 這一項的可選值有 max-age/no-cache/no-store/public/private/must-revalidate/s-maxage

這裡面最常用到的有max-age/no-cache/no-store, max-age

max-age 會設定乙個相對的過期秒數,即從首次請求算起,在這一段時間內都不會過期。

no-cache 響應是可以被快取的,只不過再跟伺服器進行新鮮度匹配之前都不會提供給客戶端使用。所以應該叫do-not-serve-from-cache-without-revalidation更好一點。

no-store 絕對禁止快取,客戶端快取不能複製響應,之後的每次請求都從伺服器獲取資源。

must-revalidate 在跟伺服器進行新鮮度驗證之前,快取不可以把快取的響應給瀏覽器。如果原始伺服器不可用,會返回504 gateway timeout的錯誤。

only-if-cached 告知瀏覽器,我希望內容來自快取,我並不關心被快取響應,是否是新鮮的。

last-modified

在瀏覽器第一次請求某乙個資源時,伺服器端的返回狀態會是200,內容是你請求的資源,同時有乙個last-modified的屬性標記此檔案在服務期端最後被修改的時間。

客戶端請求驗證快取的有效性。

if-modified-since

客戶端再次請求某個資源時請求頭會帶上這個屬性。驗證在上次修改的時間之後是否有再次修改。

if-none-match

客戶端再次請求某個資源時請求頭會帶上這個屬性。屬性值是第一次請求該資源時返回的etag值

驗證在上次修改之後是否有新的版本。

快取命中速度

快取命中 > 快取再驗證成功 > 快取未命中 = 快取再驗證失敗;

快取命中優先順序

cache-control http1.1 > expires > pragma http1.0來決定是否 (200 from cache)

根據last-modified http1.0 和 etag http1.1 來驗證是否返回 (304 not modified) 兩者都有,就必須同時驗證,並且兩者都滿足才會返回304;

盜圖一張,整個的瀏覽器請求的時候快取驗證過程如下圖

首先看有沒有快取,沒有的話直接請求伺服器,這時候沒出意外的話,正常地返回應該是200

有快取然後看是否過期,沒過期的話就用快取的資源了這時候不會髮器請求

如果過期了再向伺服器發起請求看資源是否有修改,如果沒修改則返回304,如果修改了則返回200連同最新的資源一起返回,更新瀏覽器快取副本。

參考文章

瀏覽器快取機制小結

web效能優化措施中,合理設定瀏覽器快取是重要的優化手段之一,它可以加快頁面訪問速度和節省使用者網路頻寬等。簡單介紹下相關概念。expires出自http1.0,cache control出自http1.1,同時設定兩者時,cache control 會覆蓋 expires。expires指定的是實...

瀏覽器的快取機制小結

瀏覽器快取 brower caching 是瀏覽器在本地磁碟對使用者最近請求過的文件進行儲存,當訪問者再次訪問同一頁面時,瀏覽器就可以直接從本地磁碟載入文件。我們可以通過chrome view http cache 來檢視chrome瀏覽器快取了什麼內容。推薦閱讀文章 大公司裡怎樣開發和部署前端 注...

快取 瀏覽器快取

瀏覽器快取 brower caching 是瀏覽器在本地磁碟對使用者最近請求過的文件進行儲存,當訪問者再次訪問同一頁面時,瀏覽器就可以直接從本地磁碟載入文件 1 瀏覽器第一次請求時,會發出一組 http 頭,用來指導瀏覽器如何進行快取。伺服器規定乙個資源是否要進行快取,主要由響應頭中的expires...