瀏覽器快取機制個人理解

2021-09-11 11:43:04 字數 1570 閱讀 9869

瀏覽器快取究竟有什麼作用呢?在這裡我將瀏覽器快取的作用簡單地歸結為以下幾點。

加快頁面開啟速度 降低伺服器壓力 減少網路損耗

瀏覽器快取有 html meta 標籤控制(一般不用,所以本文不介紹)與 http 頭資訊控制兩種。

快取標識字段便是expirescache-control

expires  是伺服器端在響應請求時用來規定資源的失效時間。

cache-control 是伺服器端在響應請求時用來規定資源是否需要被瀏覽器快取以及快取的有效時間等。

expires 是 http 1.0 的字段,而 cache-control  是 http 1.1 的字段,當 expires  與  cache-control 同時存在時,cache-control 的優先順序要高於  expires。

在瀏覽器快取中,還儲存了其它關於資源副本的描述字段,這些欄位都是伺服器返回資訊頭帶過來的,如last-modifiedetag

last-modified 是伺服器端在響應請求時用來說明資源的最後修改時間。與之對應的是 if-modified-since 字段。在伺服器再驗證過程中,瀏覽器傳送的 http 請求的請求頭中會帶上 if-modified-since 字段,值為該資源  last-modified 屬性的值。

當伺服器端接收到帶有  if-modified-since 屬性的請求時,則會將 if-modified-since 屬性的值與被請求資源的最後修改時間做對比。如果相同,說明資源沒有新的修改,則響應 http 304,瀏覽器會繼續使用原先儲存的該資源的副本;如果最後修改時間比較新,則說明資源被修改過,則響應 http 200,並且返回最新的資源。

etag 是伺服器端在響應請求時用來說明資源在伺服器端的唯一標識。與之對應的是 if-none-match 字段。在伺服器再驗證過程中,瀏覽器傳送的 http 請求的請求頭中會帶上 if-modified-since 字段,值為該資源  etag 屬性的值。

當伺服器端接收到帶有  if-none-match 屬性的請求時,則會將 if-none-match 屬性的值與被請求資源的唯一標識做對比。如果相同,說明資源沒有新的修改,則響應 http 304,瀏覽器會繼續使用原先儲存的該資源的副本;如果不同,則說明資源被修改過,則響應 http 200,並且返回最新的資源。

那麼當 last-modified / if-modified-since 和 etag / if-none-match 同時存在是什麼情況呢?

事實上,當兩者同時存在時,etag / if-none-match 的優先順序要高於 last-modified / if-modified-since

最後,雖然說瀏覽器快取對使用者體驗有極大的好處,但是作為開發者,我們在開發的時候則需要禁止這「討厭」瀏覽器快取,我的方法是開啟瀏覽器的開發者工具,在 network 中有個 disable cache ,鉤上就可以了,鉤上後瀏覽器會忽略掉文件過期驗證和伺服器再驗證的過程,直接向伺服器請求最新的資源。

瀏覽器快取機制

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

瀏覽器快取機制

當我們瀏覽乙個頁面發現有異常時,通常考慮的就是書不是瀏覽器做了快取呢,按ctrl f5重新請求一次就能請求到沒有快取的頁面,這個是為什麼呢。首先,ctrl f5組合鍵重新整理頁面,那麼瀏覽器會直接向目標url傳送請求,而不再使用瀏覽器快取的資料。其次,當請求到達伺服器端依然有可能出現使用伺服器端的資...

瀏覽器快取機制

瀏覽器快取機制 瀏覽器快取機制,其實主要就是 協議定義的快取機制 如 expires cache control 等 但是也有非 協議定義的快取機制,如使用 html meta 標籤,web 開發者可以在 html 頁面的節點中加入 標籤,如下 上述 的作用是告訴瀏覽器當前頁面不被快取,每次訪問都需...