『壹』 前端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響應的報文的HTTP頭中和請求結果一起返回給瀏覽器（ps：下文說的時間點均為類似：Sat Aug 14 2021 11:01:52，秒級）
兩個欄位：Expires和Cache-Control，優先順序：Cache-Control > Expires，客戶端比較時間
Expires ：HTTP/1.0，返回值為【到期時間點】，再次請求，客戶端的時間< Expires，直接用緩存（ps：客戶端與伺服器端時間可能存在誤差，出問題）
Cache-Control ：HTTP/1.1，有以下欄位
Last-Modified / If-Modified-Since 和 Etag / If-None-Match，優先順序Etag > Last-Modified，伺服器比較時間
Last-Modified（服務端返回客戶端） / If-Modified-Since（客戶端傳入服務端） ：兩個值相同，表示：資源文件在伺服器最後被修改的時間【時間點】。
Etag（服務端返回客戶端） / If-None-Match（客戶端傳入服務端） ，兩個值相同，為當前資源文件的一個唯一標識(由伺服器生成)
Etag什麼時候用
雅虎禁用了Etag：因為ETag的值和伺服器有關，那麼對於同樣的文件，可能下次請求的時候是發給不同的伺服器，結果也會重新發送數據，所以就會影響網頁載入速度，增加伺服器的壓力（但Last-Modified也與伺服器有關）
主要解決的問題：
瀏覽器的每個tab都是一個進程
兩個緩存的地方 from memory cache（內存緩存） 和 from disk cache（硬碟緩存） ，讀取順序為memory > disk
『叄』 瀏覽器緩存的方式和類型（筆記）
瀏覽器緩存只是計算機緩存的一種
1.內存緩存
將數據存到內存
2.代理伺服器緩存
就是個自己找的中介。你拿東西先找中介，中介找房東，房東給中介，中介又給你。比如你需要房子鑰匙，房東把鑰匙放在中介那，你直接從中介那裡拿鑰匙。
3.CDN緩存
將數據存到CDN伺服器。CDN也是個中介，不過這個中介是根據中介的忙碌程度（CDN伺服器忙碌程度）、跟你的距離（CDN伺服器和你的距離）自動給你分配的。
4.瀏覽器緩存（ 我是個前端，只關注瀏覽器緩存。 ）
根據HTTP協議決定要不要緩存，以什麼方式緩存，緩存到哪（內存還是硬碟等）。
瀏覽器緩存是將瀏覽器請求過的數據（資源文件）保存到電腦上。需要再次使用的時候，直接從電腦上獲取保存的數據（資源文件），這就是瀏覽器緩存
1.減少網路請求，節省流量
2.減輕伺服器壓力
3.資源載入速度快了，前端性能就更好了
1.Server Worker
還沒搞懂，搞懂了再來寫。
2.Memory Cache
內存中的緩存，關閉頁面進程就釋放內存
3.Disk Memory
硬碟中的緩存，不主動清理就一直在
4、Push Cache
推送緩存，是HTTP/2的內容，並沒有嚴格執行HTTP頭部的緩存指令。在Server Worker、Memory Cache、Disk Cache都沒有命中的時候，它會被使用。在Session中存在，Session結束就會被釋放，緩存時間短暫。
1.先去內存查找，找到直接載入
2.內存找不到，硬碟中找，找到直接載入
3.硬碟找不到進行網路請求
4.把請求獲取的資源再緩存到硬碟和內存
1.強緩存
控制強制緩存的欄位分別是Expires和Cache-Control，Cache-Control優先順序比Expires高
-Expires設置一個絕對時間的GMT格式的時間字元串，這個是資源失效時間（ 客戶端的時間小於Expires的值，缺陷就是客戶端的時間被改變就有問題 ），在這個時間之前都直接讀取緩存。
-Cache-Control替代Expires，它利用的是相對時間，利用header信息欄位的max-age值判斷。
2.協商緩存
-Last-Modified/If-Modified-Since
Last-Modified:瀏覽器向伺服器發送資源最後的修改時間
If-Modified-Since:當資源過期時，發現響應頭具有Last-Modified聲明，則再次向伺服器請求時帶上頭if-modified-since，表示請求時間。伺服器收到請求後，發現有if-modified-since則與被請求資源的最後修改時間進行對比（Last-Modified）,若最後修改時間較新，說明資源又被改過，則返回最新資源，返回200；若最後修改時間較小，說明資源無新修改，返回304 ，使用緩存文件。
缺點:單位是秒，一秒內多次改變會認為沒過期
-ETag/If-None-Match
ETag:由伺服器生成返回給前端，幫助伺服器控制web端的緩存驗證，伺服器會生成並且返回當前資源文件的一個唯一標識
If-None-Match:當資源過期時，發現響應頭具有Etag聲明，則再次向伺服器請求時帶上頭if-none-match（唯一標識Etag值）。伺服器收到該請求後，發現有If-None-Match則根據If-None-Match的欄位值與該資源在伺服器的Etag值做對比，一致則返回304，代表資源無更新，繼續使用緩存文件；不一致則重新返回資源文件，狀態碼為200。
1.強緩存不發請求，協商緩存會發請求給伺服器確認有沒有過期
2.強緩存文件更新瀏覽器不知道，協商緩存更新瀏覽器能實時知道
1.點擊瀏覽器的刷新按鈕時，全部走緩存
2.F5或者滑鼠右鍵刷新強制緩存失效，不影響協商緩存
3.CTRL+F5影響強制緩存和協商緩存都失效
『肆』 get和post請求在緩存方面的區別
緩存一般只適用於那些不會更新服務端數據的請求。
一般get請求都是查找請求，不會對伺服器資源數據造成修改。而post請求一般都會對伺服器數據造成修改，所以，一般會對get請求進行緩存，很少會對post請求進行緩存。
『伍』 HTTP緩存
Http 緩存機製作為 web 性能優化的重要手段，有如下作用：
以下是對HTTP中控制客戶端緩存的幾種方式以及優先順序的梳理
瀏覽器在請求已經訪問過的URL的時候, 會判斷是否使用緩存, 判斷是否使用緩存主要通過判斷緩存是否在有效期內, 通過兩個欄位來判斷:
當緩存過期後, 瀏覽器不會直接去伺服器上拿緩存, 而是判斷緩存是否有更新, 能否繼續使用, 判斷的方法有兩種:
參考：
徹底弄懂HTTP緩存機制及原理
知乎專欄-瀏覽器是如何控制緩存的