強制緩存和協(xié)商緩存的區(qū)別
01?
什么是瀏覽器緩存
瀏覽器緩存(Brower Caching)是瀏覽器在本地磁盤對用戶最近請求過的文檔進行存儲，當(dāng)訪問者再次訪問同一頁面時，瀏覽器就可以直接從本地磁盤加載文檔。
瀏覽器緩存的優(yōu)點有：
1. 減少了冗余的數(shù)據(jù)傳輸，節(jié)省了網(wǎng)費2. 減少了服務(wù)器的負擔(dān)，大大提升了網(wǎng)站的性能3. 加快了客戶端加載網(wǎng)頁的速度
通過復(fù)用以前獲取的資源，可以顯著提高網(wǎng)站和應(yīng)用程序的性能。Web 緩存減少了等待時間和網(wǎng)絡(luò)流量，因此減少了顯示資源表示形式所需的時間。通過使用 HTTP緩存，變得更加響應(yīng)性。
瀏覽器第一次請求時：
瀏覽器后續(xù)在進行請求時：
瀏覽器緩存分為強緩存（本地緩存）和協(xié)商緩存（對比緩存）
02?
術(shù)語解釋
1. 緩存命中：指在緩存中找到請求的數(shù)據(jù).
2.?從服務(wù)端傳給客戶端的（即響應(yīng)頭）：
? ? ? 1)?cache-control:?緩存相關(guān)的設(shè)置
? ? ? ?2)?expires：緩存的過期時間，用來指定資源到期的時間，是服務(wù)器端的具體時間點。也就是說Expires=max-age+請求時間，需要和last-modified結(jié)合使用。但是上面提到，cache-control的優(yōu)先級更高。
3）Last-Modified：表示服務(wù)端資源最后修改的時間，也就是傳給客戶端，用于告訴客戶端，服務(wù)端資源最后修改的時間
4）Etag：表示字符串唯一標(biāo)識符，也是傳給客戶端，用于告訴客戶端，表示服務(wù)端資源發(fā)生修改了的最新標(biāo)識。因為Last-Modified的一些缺陷，比如只能標(biāo)識到時間秒等，所以出現(xiàn)了Etag。當(dāng)然也可以自定義tag。
如圖：
2.從客戶端傳回服務(wù)端的（即請求頭）：
1）If-Modified-Since：表示詢問服務(wù)端，從某個時間點起資源是否修改了。這個時間點一般是服務(wù)端Last-Modified返回的時間點。
2）If-None-Match：表示詢問服務(wù)端，某個tag字符串值是否不匹配，這個tag值一般是服務(wù)端Etag返回的最新的字符串標(biāo)識符。
如圖：
總結(jié)：
客戶端請求服務(wù)端時，服務(wù)端在響應(yīng)頭添加 {Last-Modified:最新的時間1，Etag:最新的字符串標(biāo)識符1}，客戶端保存服務(wù)端的Last-Modified的值和Etag的值，下次請求服務(wù)器時，在請求頭添加{If-Modified-Since:最新的時間1，Etag:最新的字符串標(biāo)識符1}。
03
?強制緩存?
強緩存：瀏覽器在請求某一資源時，會先獲取該資源緩存的header信息，判斷是否命中強緩存（cache-control和expires信息），若命中直接從緩存中獲取資源信息，包括緩存header信息；本次請求根本就不會與服務(wù)器進行通信；在chrome控制臺的network選項中可以看到該請求返回200的狀態(tài)碼;
為什么有內(nèi)存緩存和硬盤緩存呢，怎么區(qū)分？這涉及到內(nèi)存交換的知識了
我們都知道，雖然在運行速度上硬盤不如內(nèi)存，但在容量上內(nèi)存是無法與硬盤相提并論的。當(dāng)運行一個程序需要大量數(shù)據(jù)、占用大量內(nèi)存時，內(nèi)存就會被“塞滿”，并將那些暫時不用的數(shù)據(jù)放到硬盤中，而這些數(shù)據(jù)所占的空間就是虛擬內(nèi)存。現(xiàn)在我們也明白為什么pagefile.sys的大小會經(jīng)常變化了。
內(nèi)存在計算機中的作用很大，電腦中所有運行的程序都需要經(jīng)過內(nèi)存來執(zhí)行，如果執(zhí)行的程序分配的內(nèi)存的總量超過了內(nèi)存大小，就會導(dǎo)致內(nèi)存消耗殆盡。為了解決這個問題，Windows中運用了虛擬內(nèi)存技術(shù)，即拿出一部分硬盤空間來充當(dāng)內(nèi)存使用，當(dāng)內(nèi)存占用完時，電腦就會自動調(diào)用硬盤來充當(dāng)內(nèi)存，以緩解內(nèi)存的緊張。
舉個例子來說，壓縮程序在壓縮時有時候需要讀取文件的很大一部分并保存在內(nèi)存中作反復(fù)的搜索。假設(shè)內(nèi)存大小是128MB，而要壓縮的文件有 200MB，且壓縮軟件需要保存在內(nèi)存中的大小也是 200MB，那么這時操作系統(tǒng)就要權(quán)衡壓縮程序和系統(tǒng)中的其他程序，把多出來的那一部分數(shù)據(jù)放進交換文件。
也就是說在超過VM設(shè)置的內(nèi)存大小后將進行內(nèi)存交換，跟硬盤內(nèi)存交換。
強緩存參數(shù)?
Pragma，是HTTP/1.0標(biāo)準(zhǔn)中定義的一個header屬性，請求中包含Pragma的效果跟在頭信息中定義Cache-Control: no-cache相同，但是HTTP的響應(yīng)頭沒有明確定義這個屬性，所以它不能拿來完全替代HTTP/1.1中定義的Cache-control頭。通常定義Pragma以向后兼容基于HTTP/1.0的客戶端。
?expires，這是http1.0時的規(guī)范；它的值為一個絕對時間的GMT格式的時間字符串，如Mon, 10 Jun 2015 21:31:12 GMT，如果發(fā)送請求的時間在expires之前，那么本地緩存始終有效，否則就會發(fā)送請求到服務(wù)器來獲取資源
?cache-control：max-age=number，這是http1.1時出現(xiàn)的header信息，主要是利用該字段的max-age值來進行判斷，它是一個相對值；資源第一次的請求時間和Cache-Control設(shè)定的有效期，計算出一個資源過期時間，再拿這個過期時間跟當(dāng)前的請求時間比較，如果請求時間在過期時間之前，就能命中緩存，否則就不行；cache-control除了該字段外，還有下面幾個比較常用的設(shè)置值：
?no-cache：不使用本地緩存。需要使用緩存協(xié)商，先與服務(wù)器確認返回的響應(yīng)是否被更改，如果之前的響應(yīng)中存在ETag，那么請求的時候會與服務(wù)端驗證，如果資源未被更改，則可以避免重新下載。
?no-store：直接禁止游覽器緩存數(shù)據(jù)，每次用戶請求該資源，都會向服務(wù)器發(fā)送一個請求，每次都會下載完整的資源。
?public：可以被所有的用戶緩存，包括終端用戶和CDN等中間代理服務(wù)器。
?private：只能被終端用戶的瀏覽器緩存，不允許CDN等中繼緩存服務(wù)器對其緩存。
must-revalidate，指令，那就意味著緩存在考慮使用一個陳舊的資源時，必須先驗證它的狀態(tài)，已過期的緩存將不被使用。
Cache-Control: must-revalidate
注意：如果cache-control與expires同時存在的話，cache-control的優(yōu)先級高于expires
04
?協(xié)商緩存
如果沒有命中強緩存，瀏覽器會發(fā)送請求到服務(wù)器，請求會攜帶第一次請求返回的有關(guān)緩存的header字段信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服務(wù)器根據(jù)請求中的相關(guān)header信息來比對結(jié)果是否協(xié)商緩存命中；若命中，則服務(wù)器返回新的響應(yīng)header信息（返回304狀態(tài)碼）更新緩存中的對應(yīng)header信息，但是并不返回資源內(nèi)容，它會告知瀏覽器可以直接從緩存獲??；否則返回最新的資源內(nèi)容，
協(xié)商緩存參數(shù)?
協(xié)商緩存都是由服務(wù)器來確定緩存資源是否可用的，所以客戶端與服務(wù)器端要通過某種標(biāo)識來進行通信，從而讓服務(wù)器判斷請求資源是否可以緩存訪問，這主要涉及到下面兩組header字段，這兩組搭檔都是成對出現(xiàn)的，即第一次請求的響應(yīng)頭帶上某個字段（Last-Modified或者Etag），則后續(xù)請求則會帶上對應(yīng)的請求字段（If-Modified-Since或者If-None-Match），若響應(yīng)頭沒有Last-Modified或者Etag字段，則請求頭也不會有對應(yīng)的字段。
Last-Modified/If-Modified-Since
二者的值都是GMT格式的時間字符串，具體過程：瀏覽器第一次跟服務(wù)器請求一個資源，服務(wù)器在返回這個資源的同時，在respone的header加上Last-Modified的header，這個header表示這個資源在服務(wù)器上的最后修改時間
?瀏覽器再次跟服務(wù)器請求這個資源時，在request的header上加上If-Modified-Since的header，這個header的值就是上一次請求時返回的Last-Modified的值
?服務(wù)器再次收到資源請求時，根據(jù)瀏覽器傳過來If-Modified-Since和資源在服務(wù)器上的最后修改時間判斷資源是否有變化，如果沒有變化則返回304 Not Modified，但是不會返回資源內(nèi)容；如果有變化，就正常返回資源內(nèi)容。當(dāng)服務(wù)器返回304 Not Modified的響應(yīng)時，response header中不會再添加Last-Modified的header，因為既然資源沒有變化，那么Last-Modified也就不會改變，這是服務(wù)器返回304時的response header
?瀏覽器收到304的響應(yīng)后，就會從緩存中加載資源
?如果協(xié)商緩存沒有命中，瀏覽器直接從服務(wù)器加載資源時，Last-Modified的Header在重新加載的時候會被更新，下次請求時，If-Modified-Since會啟用上次返回的Last-Modified值
?Etag/If-None-Match
這兩個值是由服務(wù)器生成的每個資源的唯一標(biāo)識字符串，只要資源有變化就這個值就會改變；其判斷過程與Last-Modified/If-Modified-Since類似，與Last-Modified不一樣的是，當(dāng)服務(wù)器返回304 Not Modified的響應(yīng)時，由于ETag重新生成過，response header中還會把這個ETag返回，即使這個ETag跟之前的沒有變化。
05
?強制緩存和協(xié)商緩存的區(qū)別
06
前端如何實現(xiàn)HTTP緩存
靜態(tài)的html頁面想要設(shè)置使用緩存需要通過HTTP的META設(shè)置expires和cache-control
設(shè)置如下網(wǎng)頁元信息:
語法：
以下場景均不能做瀏覽器緩存：
1. HTTP信息頭中包含Cache-Control:no-cache，pragma:no-cache，或Cache-Control:max-age=0等告訴瀏覽器不用緩存的請求
2. 需要根據(jù)Cookie，認證信息等決定輸入內(nèi)容的動態(tài)請求是不能被緩存的
3. 經(jīng)過HTTPS安全加密的請求，也存在例外情況
4. POST請求無法被緩存
5. HTTP響應(yīng)頭中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的請求無法被緩存
茍有恒?,?何必三更眠五更起
關(guān)注我，一起學(xué)習(xí)吧
