url輸入後的整個流程(4)-http緩存/瀏覽器緩存

http緩存策略

當客戶端第一次請求數據時，此時瀏覽器不存在緩存數據，須要向服務器請求資源，服務器在返回資源的同時返回緩存策略，http狀態碼爲200，緩存策略存在於響應頭裏，緩存策略主要有強制緩存和協商(對比)緩存，客戶端拿到後將數據和緩存策略緩存到瀏覽器。

強制緩存

對於強制緩存，服務器響應頭會有2個字段來表示，expires/cache-control。

• expire
  expires是一個時間戳，表明資源過時時間。不過該字段是http1.0的，如今瀏覽器默認使用http1.1，因此基本不用這個字段了，並且過時時間是由服務器生成的，與客戶端的時間可能存在偏差，如今使用cache-control代替
• cache-control
  cache-control常見的取值有：
  max-age：緩存的內容將在多少時間後失效；
  no-cache: 會緩存，使用協商緩存策略；
  no-store：因此內容都不會緩存，每次請求都從服務器獲取

瀏覽器第一次響應時將該字段返回給客戶端，客戶端第二次請求時，根據該字段的取值來決策，若是沒有超過max-age的過時時間，則直接從瀏覽器緩存中取數據，狀態碼爲200,若是超過過時時間或者有no-cache字段，則走協商緩存，若是有no-store字段則直接從服務器獲取。

協商緩存

協商緩存是進行比較後決定是否從服務器獲取資源。協商緩存的標識字段有Last-Modified/Etag(響應頭裏),If-Modified-Since/If-None-Match(請求頭裏)，這4個值之間是兩兩對應。

• Last-Modified/If-Modified-Since:
  服務器返回的Last-Modified指資源上次被修改的時間，服務器第一次響應時將修改時間放入該字段中，客戶端在第二次請求時，會將該值存入到If-Modified-Since字段中發送給服務器，服務器根據該字段的取值來判斷資源是否被修改過，例如，服務器第一次響應時資源修改的時間是當天下午3點，客戶端在下午5點第二次請求時，告訴服務器我緩存的數據的修改時間是下午3點，服務器判斷請求的資源是否在3點到5點之間被修改過，若是沒有，則返回304狀態碼，客戶端使用本地緩存，若是修改過則返回狀態碼200和新的數據。
• Etag/If-None-Match Etag是服務器端生成的，當前請求資源的惟一標識符，客戶端第二次請求時將該字段緩存在If-None-Match中發送給服務器，服務器將此字段與惟一標識符對比，若是不相同則資源被修改過，返回新的資源，狀態碼爲200，若是相同則返回狀態碼304，從緩存中取。
• 爲何要設置兩個字段Last-Modified和Etag?
  資源修改時間是服務器端生成的，單位是s，若是一個資源在1s內被修改了n次，Last-Modified就會不夠精準出現偏差。 Etag和Last-Modified同時出現時，Etag的優先級更高。
  總結：
  第一次請求時：

第二次請求時：

緩存位置

討論緩存策略的時候老是說從瀏覽器緩存中取數據，那緩存數據究竟存放在哪裏？一度我還覺得是存放在cookie中，就沒搞清楚cookie和cache的區別，捂臉。
緩存主要是對靜態資源而言，如圖片視頻等，咱們能夠在 Chrome 的開發者工具中，Network -> Size 一列看到一個請求最終的處理方式：若是是大小 (多少 K， 多少 M 等) 就表示是網絡請求，不然會列出 from memory cache, from disk cache 和 from ServiceWorker。
它們的優先級是：(由上到下尋找，找到即返回；找不到則繼續)Service Worker、Memory Cache、硬盤 Cache、網絡請求

• memory cache
  內存中的緩存。按照操做系統的常理：先讀內存，再讀硬盤。幾乎全部的網絡請求資源都會被瀏覽器自動加入到 memory cache 中。可是也正由於數量很大可是瀏覽器佔用的內存不能無限擴大這樣兩個因素，memory cache 註定只能是個「短時間存儲」。常規狀況下，瀏覽器的 TAB 關閉後該次瀏覽的 memory cache 便告失效 (爲了給其餘 TAB 騰出位置)。而若是極端狀況下 (例如一個頁面的緩存就佔用了超級多的內存)，那可能在 TAB 沒關閉以前，排在前面的緩存就已經失效了。
• disk cache
  也叫 HTTP cache，顧名思義是存儲在硬盤上的緩存，所以它是持久存儲的，是實際存在於文件系統中的。並且它容許相同的資源在跨會話，甚至跨站點的狀況下使用，例如兩個站點都使用了同一張圖片。disk cache 會嚴格根據 HTTP頭信息中的各種字段來斷定哪些資源能夠緩存，哪些資源不能夠緩存；哪些資源是仍然可用的，哪些資源是過期須要從新請求的。當命中緩存以後，瀏覽器會從硬盤中讀取資源，雖然比起從內存中讀取慢了一些，但比起網絡請求仍是快了很多的。絕大部分的緩存都來自 disk cache。
• Service Worker 上述的緩存策略以及緩存/讀取/失效的動做都是由瀏覽器內部判斷進行的， 咱們只能設置響應頭的某些字段來告訴瀏覽器，而不能本身操做。