22 瀏覽器快取機制

注意：該知識點屬於效能優化領域，並且整一章節都是乙個面試題

接下來的內容中我們將通過以下幾個部分來**瀏覽器快取機制：

從快取位置上來說分為四種，並且各自有優先順序，當依次查詢快取且都沒有命中的時候，才會去請求網路

1. service worker介紹

2. memory cache

那麼既然記憶體快取這麼高效，我們是不是能讓資料都存放在記憶體中呢？

4. push cache

push cache是http/2中的內容，當以上三種快取都沒有命中時，它才會被使用。並且快取時間也很短暫，只在會話（session）中存在，一旦會話結束就被釋放。

push cache在國內能夠查到的資料很少，也是因為http/2在國內不夠普及，但是http/2將會是日後的乙個趨勢

結論

通常瀏覽器快取策略分為兩種：強快取和協商快取，並且快取策略都是通過設定 http header 來實現的

強快取可以通過設定兩種http header實現：expires和cache-control。強快取表示在快取期間不需要請求，state code為 200

expires: wed,

22 oct 202008:
41:00gmt

expires是http/1的產物，表示資源會在 wed, 22 oct 2020 08:41:00 gmt 後過期，需要再次請求。並且expires受限於本地時間，如果修改了本地時間，可能會造成快取失效。

cache-control: max-age=

30

cache-control 出現於 http/1.1，優先順序高於expires。該屬性值表示資源會在 30 秒後過期，需要再次請求。

cache-control 可以在請求頭或者響應頭中設定，並且可以組合使用多種指令

1. 頻繁變動的資源

對於頻繁變動的資源，首先需要使用 cache-control: no-cache 使瀏覽器每次都請求伺服器，然後配合 etag 或者 last-modified 來驗證資源是否有效。這樣的做法雖然不能節省請求數量，但是能顯著減少響應資料大小。

瀏覽器快取機制

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

瀏覽器快取機制

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

瀏覽器快取機制

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