瀏覽器快取詳解

· 概念：簡單來說，瀏覽器快取就是把一個已經請求過的Web資源（如html頁面，圖片，js，資料等）拷貝一份副本儲存在瀏覽器中。快取會根據進來的請求儲存輸出內容的副本。當下一個請求來到的時候，如果是相同的URL，快取會根據快取機制決定是直接使用副本響應訪問請求，還是向源伺服器再次傳送請求。比較常見的就是瀏覽器會快取訪問過網站的網頁，當再次訪問這個URL地址的時候，如果網頁沒有更新，就不會再次下載網頁，而是直接使用本地快取的網頁。只有當網站明確標識資源已經更新，瀏覽器才會再次下載網頁。至於瀏覽器和網站伺服器是如何標識網站頁面是否更新的機制，將在後面介紹。

· 報文頭裡的一些關鍵資訊：

· Expires：Http1.0 中的標準，表明過期時間，注意此處的時間都是指的是伺服器的時間。

· Cache-Control：Http1.1 中的標準，可以看成是 expires 的補充。使用的是相對時間的概念。

· Cache-Control的屬性：

· max-age: 設定快取的最大的有效時間，單位為秒（s）。max-age會覆蓋掉Expires

· s-maxage: 只用於共享快取，比如CDN快取（s -> share）。與max-age 的區別是：max-age用於普通快取，
而s-maxage用於代理快取。如果存在s-maxage,則會覆蓋max-age 和 Expires.

· public：響應會被快取，並且在多使用者間共享。預設是public。

· private: 響應只作為私有的快取，不能在使用者間共享。如果要求HTTP認證，響應會自動設定為private。

· no-cache: 指定不快取響應，表明資源不進行快取。但是設定了no-cache之後並不代表瀏覽器不快取，而是在快取前要向伺服器確認資源是否被更改。因此有的時候只設定no-cache防止快取還是不夠保險，還可以加上private指令，將過期時間設為過去的時間。

· no-store: 絕對禁止快取。

· Last-modified: 表明請求的資源上次的修改時間。

· If-Modified-Since：客戶端保留的資源上次的修改時間。

· Etag：資源的內容標識。（不唯一，通常為檔案的md5或者一段hash值，只要保證寫入和驗證時的方法一致即可）

· 所以快取的呼叫步驟是：
1） 檢視是否有cache-control 的max-age / s-maxage , 如果有，則用伺服器時間date值 + max-age/s-maxage 的秒數計算出新的過期時間，將當前時間與過期時間進行比較，判斷是否過期
2）如果沒有，則用expires 作為過期時間比較

· 3）如果過期了，則請求伺服器，伺服器接收到請求之後，通過Last-Modified和Etag判斷檔案是否修改過，如果沒有修改過則傳送一個304到客戶端，告訴瀏覽器直接從自己本地的快取取資料；如果修改過那就整個資料重新發給瀏覽器。

· 參考資料：

· https://www.cnblogs.com/slly/p/6732749.html#undefined

· https://www.cnblogs.com/shixiaomiao1122/p/7591556.html

· https://segmentfault.com/a/1190000011212929