瀏覽器之http緩存（拿來吧你）

這是我參與8月更文挑戰的第2天，活動詳情查看：8月更文挑戰

首先先看一張流程圖

瀏覽器通常只會緩存get請求的內容！

瀏覽器分爲強緩存和協商緩存

強緩存（告訴瀏覽器把文件緩存下來、而且根據緩存規則來判斷以後取內容的方式、服務端設置 **Cache-Control緩存頭**）

• Cache-Control: xxxx, xxx

  • no-store 不容許緩存、每次都去服務器取內容

  • no-cache 每次攜帶本地緩存的相關驗證字段給服務器判斷是否讀取緩存返回304狀態碼使用本地緩存

  • private 專用於某單個用戶的，中間人不能緩存此響應

  • public 表示該響應能夠被任何中間代理、CDN等緩存、若是指定的話那就只能指定部分能被緩存

  • max-age=設置最大的緩存時間、好比你如今7點、服務端設置Cache-Control: max-age=86400 那就是明天的七點緩存失效、max-age=xx秒

**案例**

cache-control: max-age=xxxx，public //客戶端和代理服務器均可以緩存、緩存有效期爲xxx秒，用戶刷新從新請求）

cache-control: max-age=xxxx，private //只讓客戶端能夠緩存該資源；代理服務器不緩存,緩存有效期爲xxx秒

cache-control: max-age=xxxx，immutable // 客戶端在xxx秒的有效期內、用戶刷新也不發送請求

cache-control: no-cache //能夠在客戶端存儲資源，**每次都必須去服務端內容校驗**，來決定從服務端獲取新的資源（200）仍是使用客戶端緩存（304）

cache-control: no-store // 不走緩存、每次都去服務器獲取內容
複製代碼

Expires 是之前用來控制緩存的http頭，Cache-Control是新版的API因此不討論Expires

協商緩存：

協商緩存其實就是第一次獲取瀏覽器資源的時候瀏覽器會把當前文件的標記信息給到你、在response header裏面有etag和last-modified:

etag：每一個文件有一個，改動文件了就變了，就是個文件hash，每一個文件惟一

last-modified：文件的修改時間，精確到秒

瀏覽器會在配置了協商請求的時候、發送資源請求的Request Headers裏面攜帶If-Modified-since和If-None-Match字段信息、服務器會拿客戶端傳入的校驗參數進行文件校驗若是有內容變更則返回200瀏覽器進行從新獲取資源、若是沒有變更(S tatus Code: 304 Not Modified)則直接取內存資源！

疑問：爲何有了最後修改時間還要有個etag呢？

• 1s被文件被修改N次的狀況、由於只到秒級別

• 某些服務器不能精確的獲得文件的最後修改時間

總結：

瀏覽器在發送請求資源前、會先看請求頭是否攜帶強緩存信息expires和cache-control（服務端設置的）、若是有強緩存標識那就直接讀取緩存文件不發送請求、沒有的話就走協商緩存、協商緩存客戶端會在請求頭裏面攜帶If-Modified-since和If-None-Match字段信息、服務端接收到請求頭參數信息後會和服務端文件進行對比、若是文件並無更改的話那服務端會返回304狀態碼、這個時候並無實際的響應體內容、客戶端接收到304標識的話會直接讀取緩存內容、咱們打開F12選擇Network的話選擇一個資源Headers列能夠看到StatusCode304後面會有Not Modified (from memory cache)、若是對比後發現服務器有最新的內容那瀏覽器就會進行更新而且把文件保存在內存和磁盤上！在讀取緩存內容的時候、咱們打開一個新的標籤欄複製過來地址後執行咱們能夠看到**Status Code:** 200 OK (from disk cache) 、這裏咱們不須要去糾結200狀態碼、這裏其實瀏覽器並無發送請求而是直接取得disk(硬盤)資源進行加載、這個時候瀏覽器還會對一些資源進行內存寫入、以後從內存中讀取、通過本人測試一直刷新一直讀是取得內存資源瀏覽器並不會去和服務器進行協商請求判斷、可是他會去請求index.html進行協商判斷、若是index.html也沒有變化的話那就直接讀取內存中的js和css、可是 若是index.html和服務器進行協商判斷有更新內容的話、那瀏覽器將會更新所有資源！因此爲何webpack更改文件後從新打包須要生成hash值路徑、目的就是爲了讓客戶端在和服務器進行協商判斷的時候可以更新到最新的版本號!其本質除了更改hash值得同時還會去修改index.html的js引用地址路徑因此服務端和客戶端內容有修改因此觸發更新操做！