HTTP緩存

HTTP緩存時利用HTTP響應頭將所請求的資源在瀏覽器進行緩存，緩存方式分兩種：強緩存和協(xié)商緩存。
瀏覽器緩存是指將之前請求過的資源在瀏覽器進行緩存，以便在下一次訪問時重復使用，從而節(jié)省帶寬、提升訪問速度、降低服務器壓力。

瀏覽器在第一次請求發(fā)生后，再次請求時：

1. 瀏覽器會先獲取該資源緩存的header信息，根據(jù)其中的expires和cahe-control判斷是否命中強緩存，若命中則直接從緩存中獲取資源，包括緩存的header信息，本次請求不會與服務器進行通信；

2. 如果沒有命中強緩存，瀏覽器會發(fā)送請求到服務器，該請求會攜帶第一次請求返回的有關緩存的header字段信息（Last-Modified / IF-Modified-Since、Etag / IF-None-Match），由服務器根據(jù)請求中的相關header信息來對比結(jié)果是否命中協(xié)商緩存，若命中，則服務器返回新的響應header信息更新緩存中的對應header信息，但是并不返回資源內(nèi)容，它會告知瀏覽器可以直接從緩存獲取；否則返回最新的資源內(nèi)容。

強緩存

強緩存指的是在緩存時間內(nèi)不會向服務器發(fā)起請求，只有過期之后才會向服務器發(fā)起請求。
HTTP1.0規(guī)范：
Expires字段：表示資源的過期時間。在瀏覽器第一次請求資源時，服務器端的響應頭會附上Expires這個響應字段，當瀏覽器在下一次請求這個資源時會根據(jù)上次的Expires字段是否使用緩存資源（當請求時間小于服務端返回的到期時間，直接使用緩存數(shù)據(jù)）
比如，Expires:Mon,18 Oct 2066 23:59:59 GMT。這個時間代表著這個資源的失效時間，在此時間之前，即命中緩存。這種方式有一個明顯的缺點，由于失效時間是一個絕對時間，所以，當服務器與客戶端時間偏差較大時，就會導致緩存混亂。

HTTP1.1規(guī)范：
Expires有個缺點，當客戶端本地時間被修改時瀏覽器會直接向服務器請求新的資源，為了解決這個問題，在http1.1規(guī)范中，提出了cache-control字段，且這個字段優(yōu)先級高于上面提到的Expires，值是相對時間。
主要是利用該字段的max-age值來進行判斷，它是一個相對時間，例如，Cache-Control:max-age=3600，代表著資源的有效期是3600秒。
Cache-Control與Expires可以在服務端配置同時啟用，同時啟用的時候Cache-Control優(yōu)先級高。
cache-control除了max-age外，還有下面幾個比較常用的設置值：

1. no-cache：需要使用協(xié)商緩存來驗證緩存數(shù)據(jù)：數(shù)據(jù)儲存在本地緩存區(qū)中，只是在與原始服務器進行新鮮度再驗證之前，緩存不能將其提供給客戶端使用。需要使用緩存協(xié)商，先與服務器確認返回的響應是否被更改，如果之前的響應中存在ETag，那么請求的時候會與服務端驗證。
2. no-store：直接禁止瀏覽器緩存數(shù)據(jù)，每次都會下載完整的資源。
3. public：可以被所有的用戶緩存，包括終端用戶和CDN等中間代理服務器。
4. private：只能被終端用戶的瀏覽器緩存，不允許CDN等中繼緩存服務器對其緩存。

協(xié)商緩存

協(xié)商緩存主要依賴的響應頭包括Last-Modified和ETag，需要和服務器交互，請求資源命中協(xié)商緩存后，返回的狀態(tài)碼為 304，所以304狀態(tài)碼不應該認為是一種錯誤，而是對客戶端有緩存情況下服務端的一種響應。

Last-Modified：記錄資源最后修改的時間。
ETag：基于資源的內(nèi)容編碼生成一串唯一的Hash值, 只要內(nèi)容不同, 就會生成不同的ETag。

Last-Modified有以下兩個缺點：
1 只要編輯了，不管內(nèi)容是否真的有改變，都會以這最后修改的時間作為判斷依據(jù)，當成新資源返回，從而導致了沒必要的請求相應，而這正是緩存本來的作用即避免沒必要的請求。
2 時間的精確度只能到秒，如果在一秒內(nèi)的修改是檢測不到更新的，仍會告知瀏覽器使用舊的緩存。

內(nèi)容發(fā)生變化都會生成新的，當生成etag的資源過大時，更新比較頻繁會造成開銷，所以二者要根據(jù)資源的特性合理選擇那種模式。

狀態(tài)碼區(qū)別

200 請求成功，服務器返回全新數(shù)據(jù)。
200 from memory cache / from disk cache 本地強緩存還在有效期，直接使用本地緩存
from memory cache 是頁面刷新的時候內(nèi)存取的。from disk cache 頁面標簽關閉后從磁盤取的
304 請求成功，走了協(xié)商緩存，服務器判定（Etag和Last-modified）沒有過期，告知瀏覽器使用緩存

緩存優(yōu)先級

expires和cache-control如果同時存在時，cache-control會覆蓋expires，expires無效，無論是否過期，即 Cache-control > expires
強緩存和協(xié)商緩存如果同時存在時，會去先對比強緩存是否還再有效期，如果強緩存生效則對比協(xié)商緩存，即強緩存 > 協(xié)商緩存
協(xié)商緩存Etag和last-modified同時存在時，會先比較Etag，last-modified無效，即Etag > last-modified

如何設置強緩存和協(xié)商緩存

1、后端服務器設置

如nodejs:
res.setHeader('max-age': '3600 public')
res.setHeader(etag: '5c20abbd-e2e8')
res.setHeader('last-modified': Mon, 24 Dec 2018 09:49:49 GMT)

2、nginx配置

使用場景

1.頻繁變動的資源 協(xié)商緩存
Cache-Control: no-cache
對于頻繁變動的資源，讓他走協(xié)商緩存，no-cache是不緩存過期的資源，全都走協(xié)商緩存，雖然不能減少請求的發(fā)送次數(shù)，但是優(yōu)點就是減少響應數(shù)據(jù)的返回大小

2.不常變化的資源 強緩存
Cache-Control: max-age=31536000
對于很少變化的資源直接設置它強緩存的時間長遠一點，能夠減少請求的發(fā)送次數(shù)，比如說像一些庫類，jquery-js的庫等，還有一些logo圖片等

參考：
https://blog.csdn.net/sunyctf/article/details/129865320
https://www.51cto.com/article/676318.html
https://blog.csdn.net/weixin_59613114/article/details/129717896
https://www.jianshu.com/p/9c95db596df5/
https://blog.csdn.net/JarryNeverGiveup/article/details/131060939
https://blog.csdn.net/m0_59070120/article/details/126976646文章來源地址http://www.zghlxwxcb.cn/news/detail-861898.html

到了這里，關于HTTP系列之HTTP緩存 —— 強緩存和協(xié)商緩存的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！