瀏覽器快取機制

強快取表示不會像伺服器傳送請求，而是直接從快取中拿到資料，開啟開發者模式中的network 可以看見status顯示的是狀態碼是200，同時size裡面顯示的是from disk cache或from memorycache。強快取可以通過設定http的響應頭為expires和cache-control實現。

expires

是http1.0版本的快取機制，比較古老，用來表示指定資源過期時間（伺服器時間）。其使用的原理是請求伺服器後，伺服器會指定乙個資源過期的時間，表示在此時間之前，快取有效不需要重新請求，但是有一bug就是當我們更改客戶端的時間的時候，可能就會導致快取失效。可以簡單的用乙個公式描述為：

資源過期時間（伺服器指定）< 當前時間（客戶端指定）

cache-control

cache-control是http1.1版本的產物,比較新，同樣也是用來控制快取資源，一般會通過設定乙個最大過期時間max-age來進行使用它，同樣也可以用乙個簡單的公式表示：

快取時間（客戶端時間）+ max-age < 當前時間（客戶端時間）

同時，cache-control也可以組合多種指令。

expires和cache-control其實主要作用基本相同，只不過是機制不同，一般來說會兩個一起用到，但是cache-control的優先順序會大於expires。

協商快取的狀態碼是304，其表示當發起請求後瀏覽器會攜帶快取標識向伺服器發起請求，由伺服器來判斷是否應用，當資料沒有變化時，伺服器就會返回304，並且在快取中直接取資料；當資料發生變化時，伺服器會返回200，並且同時返回相關資料。協商快取也可以通過設定請求頭為last-modified 和 etag實現。

last-modified和if-modified-since

瀏覽器在第一次訪問資源時，伺服器返回資源的同時，在response header中新增 last-modified的header，值是這個資源在伺服器上的最後修改時間，瀏覽器接收後快取檔案和header；瀏覽器下一次請求這個資源，瀏覽器檢測到有 last-modified這個header，於是新增if-modified-since這個header，值就是last-modified中的值；伺服器再次收到這個資源請求，會根據 if-modified-since 中的值與伺服器中這個資源的最後修改時間對比，如果沒有變化，返回304和空的響應體，直接從快取讀取，如果if-modified-since的時間小於伺服器中這個資源的最後修改時間，說明檔案有更新，於是返回新的資源檔案和200。

but last-modified 還是存在一些弊端：

1.如果本地開啟快取檔案，即使沒有對檔案進行修改，但還是會造成 last-modified 被修改，服務端不能命中快取導致傳送相同的資源

2.因為 last-modified 只能以秒計時，如果在不可感知的時間內修改完成檔案，那麼服務端會認為資源還是命中了，不會返回正確的資源

etag和if-none-match

為了解決 last-modified的bug，etag主要是由服務端返回乙個對應資源的唯一標識，標識由伺服器制定，所以當下次請求資源的時候會將上一次返回的etag值放到request header裡的if-none-match裡，伺服器只需要比較標識是否相同就可以了，如果相同，返回304和空物件，從快取中讀取資料；如果不同，返回200和新的資料。

etag和last-modified的比較，etag比較準確，etag的優先順序會高於last-modified，但是etag的效能要低於last-modified，因為last-modified只需要存乙個時間。

附乙個手寫的簡版腦圖。。。。。。。。：）

time is fair, because it gives everyone 24 hours.

瀏覽器快取機制

瀏覽器快取機制

瀏覽器快取機制

瀏覽器快取機制

相關推薦