>[danger]瀏覽器中強緩存與協商緩存的緩存機制 以下是瀏覽器強緩存和協商緩存中各自常用的字段： | 強緩存字段 | 協商緩存字段 | |---------------------|-------------------------| | Expires | Last-Modified | | Cache-Control | ETag | | | If-Modified-Since | | | If-None-Match | >[info] 字段含義及作用 | 字段 | 含義及作用 | |---------------------|------------------------------------------------------------------------------------------------------------------------------| | Expires | 指定資源的過期時間。服務器在響應頭中設置該字段，告訴瀏覽器資源的過期時間。如果當前時間小于過期時間，則直接使用緩存的資源，否則重新請求。 | | Cache-Control | 控制緩存行為的指令。通過該字段，服務器可以告知瀏覽器如何處理緩存。常見的指令包括max-age（緩存有效期）、no-cache（不直接使用緩存，需要協商驗證）等。 | | Last-Modified | 資源的最后修改時間。服務器在響應頭中設置該字段，標識資源的最后修改時間。瀏覽器可以將該值存儲，并在下次請求時發送給服務器進行協商驗證。 | | ETag | 資源的唯一標識符。服務器在響應頭中設置該字段，用于唯一標識資源的版本。瀏覽器可以將該值存儲，并在下次請求時發送給服務器進行協商驗證。 | | If-Modified-Since | 上次請求資源時的Last-Modified值。瀏覽器在請求頭中設置該字段，用于與服務器進行協商驗證，判斷資源是否有更新。如果沒有更新，服務器返回304 Not Modified狀態碼。 | | If-None-Match | 上次請求資源時的ETag值。瀏覽器在請求頭中設置該字段，用于與服務器進行協商驗證，判斷資源是否有更新。如果沒有更新，服務器返回304 Not Modified狀態碼。 | | 200 OK | 表示請求成功，返回的是新的資源。若服務器返回該狀態碼，表明資源未使用緩存，瀏覽器會將新的資源保存到緩存中，并使用該資源。 | | 304 Not Modified | 表示資源未發生變化，可以使用緩存的舊資源。如果服務器確定資源未修改，返回該狀態碼，瀏覽器會從緩存中加載資源，并繼續使用該資源。 | >[info]技術解讀 >強緩存 在發送 http 請求下載資源之前首先檢查強緩存。使用的字段在 http/1.0 和 http/1.1 中分別是 **Expires** 和 **Cache-Control**。 ##### Expires http/1.0 中使用的字段是 Expires 即過期時間，存在于服務器返回的響應頭中，瀏覽器在這個過期時間前再次請求同一資源時將直接從緩存里面獲取數據，無需再次發送 http 請求。事例如下： ``` Expires: Wed, 21 Oct 2020 07:28:00 GMT ``` 使用此字段的缺陷是服務器的時間和瀏覽器的時間可能不一致，這樣服務器返回的過期時間就不一定是準確的。因此這種方式在 http/1.1 中被廢棄。 ##### Cache-Control http/1.1 中使用的字段是 Cache-Control, 也存在于服務器返回的響應頭中，但采用過期時長而非具體過期時間點，示例如下： ``` Cache-Control:public, max-age=86400 ``` 表示在響應返回后的 86400 秒也就是 24 小時之內可以直接使用緩存。 public 是另一個緩存指令，表示響應可以被任何對象（包括發送請求的客戶端、代理服務器等等）緩存，即使是通常不可緩存的內容。此外，還可組合如下的緩存指令： private:?表明響應只能被單個用戶緩存，不能作為共享緩存（即代理服務器不能緩存它）。 no-cache: 跳過當前的強緩存檢查，發送 http 請求，即直接進入 協商緩存階段。 no-store:?緩存不應存儲有關客戶端請求或服務器響應的任何內容，即不使用任何緩存。 注意：當 Expires 和 Cache-Control 同時存在的時候，Cache-Control 會被優先考慮。 >協商緩存 當強緩存失效，瀏覽器在 http 請求頭中加入某些字段，服務端根據這些字段確定瀏覽器是否能夠使用緩存，這就是協商緩存。這樣的字段有兩對：**Last-Modified**/**If-Modified-Since**和?**ETag**/**If-None-Match**。 ##### **Last-Modified**/**If-Modified-Since** - 瀏覽器第一次給服務端發送請求后，服務器會在響應頭中加上 Last-Modified 這個字段和值。 - 瀏覽器接收到這個字段并在第二次給服務端發送請求時用?If-Modified-Since 字段攜帶該值。 - 服務端接收到后會和服務端中該資源的最后修改時間作對比， - 如果請求頭中的這個值小于最后修改時間，則返回新的資源，否則返回304，告訴瀏覽器直接用緩存。 ##### **ETag**/**If-None-Match** - ETag 是服務器根據當前文件的內容，給文件生成的唯一標識，一旦文件內容有改動，這個值就會變化。 - 服務器通過響應頭把這個值傳給瀏覽器，瀏覽器接收到ETag的值，會在下次請求時將這個值放到請求頭 If-None-Match 字段中，然后發給服務器。 - 服務端接收到 If-None-Match 后，會跟服務器上該資源的 ETag 進行比對，如果兩者不一樣，返回新的資源，否則返回304，告訴瀏覽器直接用緩存。 - 另外，在 ETag 和 If-Match 請求頭的幫助下，可以檢測到"空中碰撞"的編輯沖突。 > **Last-Modified**/**If-Modified-Since**和?**ETag**/**If-None-Match**的比較 - 比較這兩種方式，精確度上 ETag 要優于?Last-Modified。因為 Last-Modified 的最小單位是秒，假如文件在一秒內改變了多次，這個時候?Last-Modified 的值并沒有變化。 - 性能上 Last-Modified 要優于?ETag，因為?Last-Modified 僅僅只是記錄一個時間點，而 Etag 需要根據文件的具體內容生成哈希值。