之前對瀏覽器快取一直沒什麼了解，直到工作中遇到了一些相關需求。感覺自己的知識不論是深度還是廣度都還差得遠，都要一一補全。這次就來了解一下瀏覽器快取的相關機制。
瀏覽器在開啟頁面時需要向伺服器請求各種資源，但如果每次開啟、重新整理都去請求，不僅伺服器壓力大，顯示速度也慢，體驗不好。所以瀏覽器中有快取機制，把得到的資源儲存在本地，需要時直接使用。使用快取的好處也顯而易見：
減少頁面載入時間
降低伺服器負載
在開發者工具-network-size中可以看到，有些請求的資源顯示了大小，如8kb，有的請求資源顯示了from memory cache或者from disk cache，他們就是來自快取。memory cache就是指把資源快取到記憶體中，下次使用時直接從記憶體中獲取，比如隨時可能執行的jsdisk cache就是將資源快取到磁碟中，下次使用時從磁碟中獲取，比如只需要載入一次就可以渲染的css**快取原理 (訪問快取優先順序):先在記憶體中查詢,如果有,直接載入。
如果記憶體中不存在,則在硬碟中查詢,如果有直接載入。
如果硬碟中也沒有,那麼就進行網路請求。
請求獲取的資源快取到硬碟和記憶體。
強快取:
協商快取
瀏覽器再向伺服器請求資源時,首先判斷是否命中強快取,再判斷是否命中協商快取!瀏覽器在載入資源時，會先根據本地快取資源的 response header 中的資訊（expires和cache-control）判斷是否命中強快取，如果命中則直接使用快取中的資源不會再向伺服器傳送請求。該字段是 http1.0 時的規範，它的值為乙個絕對時間的 gmt 格式的時間字串，比如 expires:mon,18 oct 2066 23:59:59 gmt。這個時間代表著這個資源的失效時間，在此時間之前，即命中快取。這種方式有乙個明顯的缺點，由於失效時間是乙個絕對時間，所以當伺服器與客戶端時間偏差較大時，就會導致快取混亂。cache-control 是 http1.1 時出現的 header 資訊，主要是利用該字段的 max-age 值來進行判斷，它是乙個相對時間，例如 cache-control:max-age=3600，代表著資源的有效期是 3600 秒。cache-control 除了該字段外，還有下面幾個比較常用的設定值：cache-control 與 expires 可以在服務端配置同時啟用，同時啟用的時候 cache-control 優先順序高。當強快取沒有命中的時候，瀏覽器會傳送乙個請求到伺服器，伺服器根據header中的部分資訊來判斷是否命中快取。如果命中，則返回 304 ，告訴瀏覽器資源未更新，可使用本地的快取。這裡的瀏覽器第一次請求乙個資源的時候，伺服器返回的 header 中會加上 last-modify，last-modify 是乙個時間標識該資源的最後修改時間。header中的資訊指的是last-modify/if-modify-since和etag/if-none-match。當瀏覽器再次請求該資源時，request 的請求頭中會包含 if-modify-since，該值為快取之前返回的 last-modify。伺服器收到 if-modify-since 後，根據資源的最後修改時間判斷是否命中快取。
如果命中快取，則返回 304，並且不會返回資源內容，並且不會返回 last-modify。
缺點:與 last-modify/if-modify-since 不同的是，etag/if-none-match 返回的是乙個校驗碼。etag 可以保證每乙個資源是唯一的，資源變化都會導致 etag 變化。伺服器根據瀏覽器上送的 if-none-match 值來判斷是否命中快取。
與 last-modified 不一樣的是，當伺服器返回 304 not modified 的響應時，由於 etag 重新生成過，response header 中還會把這個 etag 返回，即使這個 etag 跟之前的沒有變化。
last-modified 與 etag 是可以一起使用的，伺服器會優先驗證 etag，一致的情況下，才會繼續比對 last-modified，最後才決定是否返回 304。
瀏覽器快取機制
最近在準備優化日誌請求時遇到了一些令人疑惑的問題，比如為什麼響應頭里出現了兩個 cache control 為什麼明明設定了 no cache 卻還是發請求，為什麼多次訪問時有時請求裡帶了 etag，有時又沒有帶？等等。後來查了一些資料以及同事親自驗證，總算對這些問題有了個清晰的理解，現在整理出來以...
瀏覽器快取機制
當我們瀏覽乙個頁面發現有異常時，通常考慮的就是書不是瀏覽器做了快取呢，按ctrl f5重新請求一次就能請求到沒有快取的頁面，這個是為什麼呢。首先，ctrl f5組合鍵重新整理頁面，那麼瀏覽器會直接向目標url傳送請求，而不再使用瀏覽器快取的資料。其次，當請求到達伺服器端依然有可能出現使用伺服器端的資...
瀏覽器快取機制
瀏覽器快取機制 瀏覽器快取機制，其實主要就是 協議定義的快取機制 如 expires cache control 等 但是也有非 協議定義的快取機制，如使用 html meta 標籤，web 開發者可以在 html 頁面的節點中加入 標籤，如下 上述 的作用是告訴瀏覽器當前頁面不被快取，每次訪問都需...