瀏覽器快取整理

對瀏覽器快取這一塊一直是亂哄哄的狀態，今天終於有時間整理一下，寫下這篇筆記，以供日後查閱。

良好的快取策略可以降低資源的重複載入提高網頁的整體載入速度

通常瀏覽器快取策略分為兩種：強快取和協商快取

瀏覽器在載入資源時，根據請求頭的expires和cache-control判斷是否命中強快取，是則直接從快取讀取資源，不會發請求到伺服器。

如果沒有命中強快取，瀏覽器一定會傳送乙個請求到伺服器，通過last-modified和etag驗證資源是否命中協商快取，如果命中，伺服器會將這個請求返回，但是不會返回這個資源的資料，依然是從快取中讀取資源

如果前面兩者都沒有命中，直接從伺服器載入資源

如果命中，都是從客戶端快取中載入資源，而不是從伺服器載入資源資料；

強快取不發請求到伺服器，協商快取會發請求到伺服器。

強快取通過expires和cache-control兩種響應頭實現

expires是http1.0提出的乙個表示資源過期時間的header，它描述的是乙個絕對時間，由伺服器返回。

expires 受限於本地時間，如果修改了本地時間，可能會造成快取失效

expires: sat, 29 sep 2018 14:20:00 gmt

cache-control 出現於 http / 1.1，優先順序高於 expires,表示的是相對時間

cache-control: max-age=315360000

cache-control在request和response中都可以使用

在請求中使用cache-control 時，它可選的值有：

在響應中使用cache-control 時，它可選的值有：

當瀏覽器對某個資源的請求沒有命中強快取，就會發乙個請求到伺服器，驗證協商快取是否命中，如果協商快取命中，請求響應返回的http狀態為304並且會顯示乙個not modified的字串

協商快取是利用的是【last-modified，if-modified-since】和【etag、if-none-match】這兩對header來管理的

last-modified 表示請求來的檔案的最後修改日期，瀏覽器會在request header加上if-modified-since（上次返回的last-modified的值），詢問伺服器在該日期後資源是否有更新，有更新的話就會將新的資源傳送回來。

etag就像乙個指紋，資源變化都會導致etag變化，跟最後修改時間沒有關係，etag可以保證每乙個資源是唯一的

if-none-match的header會將上次返回的etag傳送給伺服器，詢問該資源的etag是否有更新，有變動就會傳送新的資源回來

etag的優先順序比last-modified更高

客戶端請求乙個頁面（a）。

伺服器返回頁面a，並在給a加上乙個last-modified/etag。

客戶端展現該頁面，並將頁面連同last-modified/etag一起快取。

客戶再次請求頁面a，並將上次請求時伺服器返回的last-modified/etag一起傳遞給伺服器。

伺服器檢查該last-modified或etag，並判斷出該頁面自上次客戶端請求之後還未被修改，直接返回響應304和乙個空的響應體。

etag對last-modified的補充

首先last-modified在http/1.0中被提出，而在http/1.1中提出的etag則是為了解決last-modified無法解決的一些問題

一些檔案也許會週期性的更改，但是他的內容並不改變(僅僅改變的修改時間)，這個時候我們並不希望客戶端認為這個檔案被修改了，而重新get；

某些檔案修改非常頻繁，比如在秒以下的時間內進行修改，(比方說1s內修改了n次)，if-modified-since能檢查到的粒度是s級的，這種修改無法判斷(或者說unix記錄mtime只能精確到秒)；

某些伺服器不能精確的得到檔案的最後修改時間。

last-modified對etag的補充

一些等靜態檔案的修改，如果每次掃瞄內容生成 etag 來比較，顯然要比直接比較修改時間慢很多

小結所以說兩者並不是互斥，而是相輔相成的關係，既可以單獨使用，又可以同時使用。

同時傳入伺服器時，伺服器可以根據自己的快取機制的需要，選擇etag或者是last-modified來做快取判斷的依據，甚至可以兩個同時參考。

協商快取需要配合強快取使用，如果不啟用強快取的話，協商快取根本沒有意義

大部分web伺服器都預設開啟協商快取，而且是同時啟用【last-modified，if-modified-since】和【etag、if-none-match】

apache對於靜態內容缺省會返回last-modified和etag.

nginx只會返回last-modified(可配置etag on開啟).

但是下面的場景需要注意：

原文在這裡