瀏覽器 HTTP 協議快取機制詳解

2021-07-14 21:25:47 字數 1987 閱讀 7380

最近在看有關於android網路請求框架,在閱讀okhttp源**的時候遇到快取有關的問題。自己以前也看過有關文章但看完之後都沒有太深的影響,今天發現一片很不錯的文章記錄下來。

**:

快取分為服務端側(server side,比如 nginx、apache)和客戶端側(client side,比如 web browser)。

服務端快取又分為 **伺服器快取 和 反向**伺服器快取(也叫閘道器快取,比如 nginx反向**、squid等),其實廣泛使用的 cdn 也是一種服務端快取,目的都是讓使用者的請求走」捷徑「,並且都是快取、檔案等靜態資源。

客戶端側快取一般指的是瀏覽器快取,目的就是加速各種靜態資源的訪問,想想現在的大型**,隨便乙個頁面都是一兩百個請求,每天 pv 都是億級別,如果沒有快取,使用者體驗會急劇下降、同時伺服器壓力和網路頻寬都面臨嚴重的考驗。

瀏覽器快取控制機制有兩種:html meta標籤 vs. http頭資訊

瀏覽器快取機制,其實主要就是http協議定義的快取機制(如: expires; cache-control等)。但是也有非http協議定義的快取機制,如使用html meta 標籤,web開發者可以在html頁面的節點中加入標籤,**如下:

上述**的作用是告訴瀏覽器當前頁面不被快取,每次訪問都需要去伺服器拉取。使用上很簡單,但只有部分瀏覽器可以支援,而且所有快取**伺服器都不支援,因為**不解析html內容本身。而廣泛應用的還是 http頭資訊 來控制快取,

下面我主要介紹http協議定義的快取機制。

etag是伺服器自動生成或者由開發者生成的對應資源在伺服器端的唯一識別符號,能夠更加準確的控制快取。last-modified與etag一起使用時,伺服器會優先驗證etag。

瀏覽器快取行為還有使用者的行為有關,如果大家對 強制重新整理(ctrl + f5) 還有印象的話應該能立刻明白我的意思~

使用者操作

expires/cache-control

last-modified/etag

位址列回車 有效

有效頁面鏈結跳轉 有效

有效新開視窗 有效

有效前進、後退 有效

有效f5/按鈕重新整理

無效(br重置max-age=0) 有效

ctrl+f5重新整理

無效(重置cc=no-cache)

無效(請求頭丟棄該選項)

具體請參考文末 refer [6]

[1] 

瀏覽器快取機制

[2]web 開發人員需知的 web 快取知識

[3] 

瀏覽器快取詳解:expires,cache-control,last-modified,etag詳細說明

[4] 

在瀏覽器位址列按回車、f5、ctrl+f5重新整理網頁的區別

[5] 

cache control 與 etag

[6] 

快取的故事

[7] google的pagespeed**優化理論中提到使用etag可以減少伺服器負擔

[8] yahoo的yslow法則中則提示謹慎設定etag

[9] h5 快取機制** 移動端 web 載入效能優化

[10] 網頁效能: 快取效率實踐

[11] 透過瀏覽器看http快取

[12] 瀏覽器快取知識小結及應用

[13] 大公司裡怎樣開發和部署前端**?

[14] 瀏覽器快取機制詳解

瀏覽器 HTTP 協議快取機制詳解

最近在準備優化日誌請求時遇到了一些令人疑惑的問題,比如為什麼響應頭里出現了兩個 cache control 為什麼明明設定了 no cache 卻還是發請求,為什麼多次訪問時有時請求裡帶了 etag,有時又沒有帶?等等。後來查了一些資料以及同事親自驗證,總算對這些問題有了個清晰的理解,現在整理出來以...

瀏覽器 HTTP 協議快取機制詳解

最近在準備優化日誌請求時遇到了一些令人疑惑的問題,比如為什麼響應頭里出現了兩個 cache control 為什麼明明設定了 no cache 卻還是發請求,為什麼多次訪問時有時請求裡帶了 etag,有時又沒有帶?等等。後來查了一些資料以及同事親自驗證,總算對這些問題有了個清晰的理解,現在整理出來以...

瀏覽器 HTTP 協議快取機制詳解

最近在準備優化日誌請求時遇到了一些令人疑惑的問題,比如為什麼響應頭里出現了兩個 cache control 為什麼明明設定了 no cache 卻還是發請求,為什麼多次訪問時有時請求裡帶了 etag,有時又沒有帶?等等。後來查了一些資料以及同事親自驗證,總算對這些問題有了個清晰的理解,現在整理出來以...