http圖片緩存機制

『壹』 前端http請求細節——Cache-Control（緩存機制）

請求和響應中的 Cache-Control 指令並不完全相同，具體可以查看 這里 ，包括指令的具體意思，這里不過多贅述。（默認值：private）

瀏覽器的緩存機制是根據 HTTP 報文的緩存標識進行的，瀏覽器第一次向伺服器發起該請求後拿到請求結果，會根據響應報文中 HTTP 頭的緩存標識，決定是否緩存結果。
瀏覽器緩存策略分為兩種：強制緩存和協商緩存。

強制緩存不會向伺服器發送請求，直接從緩存中讀取資源，可以看到請求返回的狀態碼都是200，並且 Size 代表該緩存的位置。

瀏覽器讀取緩存的順序為memory –> disk。

三級緩存原理 (訪問緩存優先順序)：

在瀏覽器中，瀏覽器會在js，字體，圖片等文件解析執行後直接存入內存緩存中，那麼當刷新頁面時只需直接從內存緩存中讀取(from memory cache)；而css文件則會存入硬碟文件中，所以每次渲染頁面都需要從硬碟讀取緩存(from disk cache)。

為什麼CSS會放在硬碟緩存中？
因為CSS文件載入一次就可渲染出來,我們不會頻繁讀取它,所以它不適合緩存到內存中,但是js之類的腳本卻隨時可能會執行,如果腳本在磁碟當中,我們在執行腳本的時候需要從磁碟取到內存中來,這樣IO開銷就很大了,有可能導致瀏覽器失去響應。

若伺服器的資源最後被修改時間 > If-Modified-Since的欄位值
則重新返回資源，狀態碼為200；否則則返回304，代表資源無更新，可繼續使用緩存文件

If-None-Match 的欄位值 = 該資源在伺服器的Etag值
一致則返回304，代表資源無更新，繼續使用緩存文件；不一致則重新返回資源文件，狀態碼為200。

ETag 和 Last-Modified 區別

參考鏈接：
https://juejin.im/entry/5ad86c16f265da505a77dca4
https://www.cnblogs.com/suihang/p/12855345.html
https://www.jianshu.com/p/54cc04190252

『貳』 在HTTP中，我們可以通過設置響應頭中的哪些參數來設定緩存

在HTTP中，我們可以通過設置響應頭中的「Cache-Control」和「Expires」欄位來設定緩存的過期時間。
詳細解釋：
HTTP（超文本傳輸協議）中的緩存機制是用於在網路中減少不必要的數據傳輸，提高網路應用的性能。當我們訪問一個網頁時，HTTP緩存可以存儲網頁的數據，當再次訪問該網頁時，如果緩存中的數據未過期，瀏覽器就會直接從緩存中讀取數據，而不是從伺服器重新下載。
設置緩存的過期時間是通過在HTTP響應頭中設定「Cache-Control」和「Expires」欄位來實現的。其中，「Cache-Control」欄位用於定義緩存行為，它可以設定多個值，如「public」、「private」、「no-cache」、「max-age」等。「Expires」欄位則用於設定緩存的過期日期和時間。
例如，如果我們希望一個資源在客戶端的緩存中保留一天，我們可以在響應頭中設定「Cache-Control: max-age=86400」。這表示該資源在緩存中的最大有效時間為86400秒（即24小時）。當超過這個時間後，緩存的資源就會被認為過期，瀏覽器需要重新從伺服器下載該資源。
同時，我們也可以使用「Expires」欄位來設定緩存的過期時間。它的值是一個日期和時間，表示在這個時間之後，緩存的資源就會過期。例如，「Expires: Wed, 21 Jul 2023 10:00:00 GMT」表示該資源將在2023年7月21日10:00 GMT後過期。
需要注意的是，「Cache-Control」和「Expires」欄位並不能保證緩存一定有效。它們只是給瀏覽器提供一個建議，實際的緩存行為還會受到瀏覽器自身的緩存策略，用戶的網路環境等多種因素影響。因此，在設定緩存策略時，我們需要充分考慮到這些因素，以確保我們的應用能在各種網路環境下都能正常工作。