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

2021-08-09 12:19:29 字數 3578 閱讀 1121

最近在準備優化日誌請求時遇到了一些令人疑惑的問題,比如為什麼響應頭里出現了兩個 cache control、為什麼明明設定了 no cache 卻還是發請求,為什麼多次訪問時有時請求裡帶了 etag,有時又沒有帶?等等。。。

後來查了一些資料以及同事親自驗證,總算對這些問題有了個清晰的理解,現在整理出來以備忘。

快取分為服務端側(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協議定義的快取機制。

值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

各個訊息中的指令含義如下:

public指示響應可被任何快取區快取。

private指示對於單個使用者的整個或部分響應訊息,不能被共享快取處理。這允許伺服器僅僅描述當使用者的部分響應訊息,此響應訊息對於其他使用者的請求無效。

no-cache指示請求或響應訊息不能快取,該選項並不是說可以設定」不快取「,容易望文生義~

no-store用於防止重要的資訊被無意的發布。在請求訊息中傳送將使得請求和響應訊息都不使用快取,完全不存下來。

max-age指示客戶機可以接收生存期不大於指定時間(以秒為單位)的響應。

min-fresh指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。

max-stale指示客戶機可以接收超出超時期間的響應訊息。如果指定max-stale訊息的值,那麼客戶機可以接收超出超時期指定值之內的響應訊息。

last-modified:標示這個響應資源的最後修改時間。web伺服器在響應請求時,告訴瀏覽器資源的最後修改時間。

if-modified-since:當資源過期時(使用cache-control標識的max-age),發現資源具有last-modified宣告,則再次向web伺服器請求時帶上頭 if-modified-since,表示請求時間。web伺服器收到請求後發現有頭if-modified-since 則與被請求資源的最後修改時間進行比對。若最後修改時間較新,說明資源又被改動過,則響應整片資源內容(寫在響應訊息包體內),http

200;若最後修改時間較舊,說明資源無新修改,則響應http

304 (無需包體,節省瀏覽),告知瀏覽器繼續使用所儲存的cache。

etag:web伺服器響應請求時,告訴瀏覽器當前資源在伺服器的唯一標識(生成規則由伺服器決定)。apache中,etag的值,預設是對檔案的索引節(inode),大小(size)和最後修改時間(mtime)進行hash後得到的。

if-none-match:當資源過期時(使用cache-control標識的max-age),發現資源具有etage宣告,則再次向web伺服器請求時帶上頭if-none-match (etag的值)。web伺服器收到請求後發現有頭if-none-match 則與被請求資源的相應校驗串進行比對,決定返回200或304。

last-modified標註的最後修改只能精確到秒級,如果某些檔案在1秒鐘以內,被修改多次的話,它將不能準確標註檔案的修改時間

如果某些檔案會被定期生成,當有時內容並沒有任何變化,但last-modified卻改變了,導致檔案沒法使用快取

有可能存在伺服器沒有準確獲取檔案修改時間,或者與**伺服器時間不一致等情形

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] 瀏覽器快取機制詳解

[15] 關於快取和 chrome 的「新版重新整理」

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

最近在看有關於android網路請求框架,在閱讀okhttp源 的時候遇到快取有關的問題。自己以前也看過有關文章但看完之後都沒有太深的影響,今天發現一片很不錯的文章記錄下來。快取分為服務端側 server side,比如 nginx apache 和客戶端側 client side,比如 web b...

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

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

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

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