關於瀏覽器快取，一次全部弄明白
什麼是快取
平時生活當中快取一集電視劇，下載一首歌;這些資源是可以直接離線觀看的，沒有去請求網路，資源在本地。
瀏覽器中的快取又是什麼
如上所說，快取即是離線的資源;對於瀏覽器開發者而言，快取不是我們用瀏覽器下載了什麼， 而是比如我們通過瀏覽器開啟過一個網頁，這個網頁裡面所包含的資源(圖片、css檔案、js檔案等)在無感知的情況下，快取在了本地。
瀏覽器中快取的步驟是什麼樣的
我們知道瀏覽器會有快取，那麼是我們每次去開啟之前已經開啟過的網站，都是用的快取嗎?當然不是!!!瀏覽器有一套協議來管理什麼時候需要去請求伺服器，什麼時候使用本地快取;這套協議就叫做快取協議(快取機制)。
一起來看一下這套機制的流程是什麼樣的：
很隨意的來解釋一下這張圖：
1.瀏覽器發出請求，檢查本地是否有快取;
2.如果有快取，判斷快取是否過期;
3.如果過期，向伺服器傳送驗證當前本地資源還是否可用，如果可用，返回狀態碼304，使用本地快取。如果不可用，返回狀態碼200，並返回新資源，並把資源寫入到快取當中。
4.如果沒有過期，直接載入快取資源使用。
開啟瀏覽器開發工具= >network;可以看到如下圖:
- 第一個資源是請求返回的新資源。
- 第二個和第三個是讀取記憶體當中的資源，耗費時間為0ms。
- 後面幾個是讀取本地硬盤裡面的快取資源，讀取硬碟比較慢，所以有時間花銷，但總體是比請求網路快的多。
怎麼判斷是否有快取
在第一次請求頁面成功返回資源後，會記錄的每一個快取檔案與其url的對應關係，儲存在本地，下一次再請求的時候，或者瀏覽器開啟之後，通過請求資源的url去匹配是否有對應的資源;來確認這個檔案是否有快取(此處並不能確認檔案是否已經過期)。
怎麼判斷命中的快取是否可用
通過上一步命中快取資源之後，首先會檢視快取協議的裡的相關配置欄位(Cache-Control、Expires);檢視當前快取是否過期，是否還可用。
cache-control欄位的含義
Expires欄位
當兩個欄位都有的時候，會忽略掉Expires欄位。
如果快取資源不可用，怎麼處理
根據配置，如果發現資源可用，終止請求，返回快取資源;發現不可用時候，回發起網路請求，在發起網路請求的時候，回去檢視是否存在Etag欄位、Last-Modified欄位;
1.如果沒有發現相關欄位，直接發起請求，返回相關資源，寫入快取當中;
2.如果發現了Etag、Last-Modified欄位，附帶上相應的欄位內容，發起請求，服務端會根據你發起的欄位內容做匹配，如果匹配成功，說明在客戶端的快取資源還是可用的，返回304。如果匹配失敗，服務端會返回200，並攜帶上相應的資原始檔。
那麼Etag欄位和Last-Modified欄位又代表什麼意思呢?他們的作用又是什麼呢?
這兩個欄位是在資源返回的時候請求header頭攜帶回來的。
Etag欄位：表示請求資源在伺服器的唯一標識，瀏覽器可以根據ETag值快取資料，下次請求的時候以If-None-Match欄位請求。
Etag
Last-Modified欄位：用於標記請求資源的最後一次修改時間。請求的時候以If-Modified-Since欄位請求。
Last-Modified
If-Modified-Since
全部過程解析
以下是http快取可能涉及到的所有的欄位：
