Caches作用
Web緩存可以保存常見文檔副本，當(dāng)發(fā)起Web請(qǐng)求時(shí)，如果本地有 “已緩存的" 的副本，就可以直接從本地存儲(chǔ)中提取這個(gè)文檔，而不是去從原始服務(wù)器中拿。

減少冗余數(shù)據(jù)傳輸

當(dāng)很多客戶端訪問原始服務(wù)器頁面時(shí)，服務(wù)器會(huì)多次傳輸同一份文檔，相同的數(shù)據(jù)在網(wǎng)絡(luò)中一遍遍的傳輸。這些冗余數(shù)據(jù)會(huì)耗盡昂貴的網(wǎng)絡(luò)帶寬，降低傳輸速度。

使用緩存之后，瀏覽器只要保留第一條服務(wù)器響應(yīng)的副本，后續(xù)對(duì)這個(gè)資源的訪問都可以從緩存副本中得到了，減少了重復(fù)流量。

緩解帶寬瓶頸

網(wǎng)絡(luò)為本地網(wǎng)絡(luò)客戶端提供的帶寬比服務(wù)器提供的帶寬大很多?？蛻舳藭?huì)以路徑上最慢的速度訪問服務(wù)器。如果客戶端從本地或者局域網(wǎng)的緩存中得到了一份副本，那么緩存就可以提高性能，尤其在傳輸大文件時(shí)。

降低原始服務(wù)器負(fù)載

當(dāng)很多人去訪問原始服務(wù)器時(shí)，會(huì)產(chǎn)生巨大流量，從而可能導(dǎo)致服務(wù)器崩潰

降低距離時(shí)延

將緩存放在本地或者局域網(wǎng)內(nèi)可以大幅度降低傳輸距離，加快傳輸速度。

瀏覽器緩存過程
Web緩存服務(wù)器的基本工作原理很簡(jiǎn)單，對(duì)一條HTTP GET請(qǐng)求的緩存過程如下：

· 接收：緩存從網(wǎng)絡(luò)中讀取抵達(dá)的請(qǐng)求報(bào)文

· 解析：解析報(bào)文，提取首部

· 查詢：查詢本地是否有副本，如果沒有，就發(fā)起請(qǐng)求獲取副本

· 新鮮度檢測(cè)：查看本地緩存是否足夠新鮮，如果不是，則查詢服務(wù)器是否有更新

· 創(chuàng)建響應(yīng)：返回緩存副本

· 發(fā)送：將響應(yīng)發(fā)回給客戶端

對(duì)于瀏覽器而言，整個(gè)過程又可以簡(jiǎn)化：

· 查詢本地副本，如果有且足夠新鮮，則直接使用本地副本

· 否則發(fā)起請(qǐng)求，驗(yàn)證本地副本是否足夠新鮮

以上兩個(gè)過程分別稱為強(qiáng)緩存和協(xié)商緩存。

強(qiáng)緩存
強(qiáng)緩存即直接從本地讀取緩存副本，不需要發(fā)起請(qǐng)求。這種方式是最快的。

強(qiáng)緩存通過HTTP 首部：cache-control管理

cache-control首部

cache-control首部用來指定緩存策略，例如是否能緩存，誰可以緩存，緩存多久

no-cache與no-store：

no-cache：表示必須先與服務(wù)器確認(rèn)返回的響應(yīng)是否被更改，然后才能使用該響應(yīng)來滿足后續(xù)對(duì)同一個(gè)網(wǎng)址的請(qǐng)求。如果資源未被更改，可以避免下載。

no-store：禁止瀏覽器 （和所有中繼緩存）存儲(chǔ)返回的 任何版本的響應(yīng)，每次用戶請(qǐng)求該資源時(shí)，都會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，每次都會(huì)下載完整的響應(yīng)

public 與 private：

public：即使有關(guān)聯(lián)的 HTTP 認(rèn)證，甚至響應(yīng)狀態(tài)碼無法正常緩存，響應(yīng)也可以被緩存

private：不允許任何中繼緩存對(duì)其進(jìn)行緩存

max-age指令

指定從當(dāng)前請(qǐng)求開始，允許獲取的響應(yīng)被重用的最長(zhǎng)時(shí)間（單位為秒）。

通過cache-control的max-age，設(shè)置好緩存時(shí)間，單位是秒，例如緩存一年：

cache-control: public, max-age=31536000
當(dāng)使用本地強(qiáng)緩存時(shí)，瀏覽器發(fā)回的響應(yīng)信息是 200 from cache 或者 200 from memory cache，所耗費(fèi)的時(shí)間在幾毫秒之間，可以忽略不計(jì)。

強(qiáng)緩存的更新問題：如果資源有更新，則希望瀏覽器使用新的資源。但是在現(xiàn)如今情況下，除了修改資源名稱，沒有別的辦法更新資源。所以現(xiàn)在通常使用的辦法是更新資源名稱，例如資源名稱一般是：

[name]-[hash].ext
在原始文件名之后加入文件哈希值，這樣當(dāng)文件內(nèi)容修改之后，哈希值就會(huì)改變。再修改html文件的引用地址，這樣就可以做到資源更新時(shí)，自動(dòng)下載新資源；否則會(huì)一直使用本地緩存。

expires首部

expires是HTTP/1.0時(shí)期用于強(qiáng)緩存的首部字段。它會(huì)指定一個(gè)絕對(duì)的過期日期，如果日期已經(jīng)過了，說明本地副本不再新鮮了。例如：

Expires: Fri, 09 Dec 2016, 05:00:00 GMT
Expires也是精確到秒的。

由于expires使用的是絕對(duì)日期，如果服務(wù)器與客戶端時(shí)間不一致，則會(huì)出現(xiàn)緩存不成功或者緩存不更新的問題。所以現(xiàn)在都建議cache-control做強(qiáng)緩存。

協(xié)商緩存
當(dāng)本地緩存過期的時(shí)候，瀏覽器就會(huì)嘗試協(xié)商緩存。協(xié)商緩存會(huì)發(fā)起請(qǐng)求，以驗(yàn)證本地副本是否可以使用。也稱為再驗(yàn)證的過程。

· 如果驗(yàn)證后顯示文檔內(nèi)容變化，瀏覽器會(huì)獲取一份新的副本，替代舊副本，緩存在本地

· 如果驗(yàn)證后顯示文檔內(nèi)容無變化，瀏覽器只用獲取新的首部和新的過期日期

根據(jù)響應(yīng)中的狀態(tài)碼來指明文檔沒有變化。304 Not Modified
驗(yàn)證文檔內(nèi)容是否變化有兩種方式，統(tǒng)稱為條件GET方法

Last-Modified 與 If-Modified-Since首部

這一對(duì)首部通過資源修改日期判斷是否有變化，主要過程為：

· 首次獲取資源：服務(wù)器響應(yīng)中添加首部Last-Modified，說明資源最近一次修改時(shí)間。瀏覽器保存下來這個(gè)時(shí)間

· 驗(yàn)證資源：瀏覽器帶上If-Modified-Since首部，值就是Last-Modified返回的時(shí)間；服務(wù)器比較If-Modified-Since的時(shí)間與資源最近一次修改時(shí)間：

o 如果最近一次修改時(shí)間小于If-Modified-Since的時(shí)間，則返回304響應(yīng)，響應(yīng)中也會(huì)有cache-control、expires、Date首部；

o 如果最近一次修改時(shí)間大于If-Modified-Since的時(shí)間，則返回新資源，并且更新所對(duì)應(yīng)的全部首部，包括cache-control、expires、Date

ETag與If-None-Match首部

ETag是服務(wù)器為資源生成的唯一標(biāo)識(shí)字符串。只有當(dāng)文件內(nèi)容變化時(shí)，ETag才會(huì)變化。使用過程與Last-Modified類似。

· 首次獲取資源：瀏覽器得到響應(yīng)首部ETag對(duì)應(yīng)的值

· 驗(yàn)證資源：帶上If-None-Match首部，值就是瀏覽器從服務(wù)器獲得的ETag值，這樣服務(wù)器可以比較ETag值來確定客戶端緩存是否是最新，如果不是最新，則返回新文檔；如果是，直接返回304Not Modified，包括cache-control、expires、Date首部

ETag對(duì)比Last-Modified優(yōu)勢(shì)

在有些情況下，Last-Modified會(huì)出現(xiàn)難以解決的問題：

· 有些文檔可能會(huì)被周期性的重寫，但實(shí)際內(nèi)容并沒有變化。而此時(shí)Last-Modified會(huì)變化，ETag則不會(huì)

· 有些文檔被修改了，但是修改的內(nèi)容并不重要，比如注釋，不需要更新緩存

· 有些服務(wù)器無法準(zhǔn)確判斷頁面最后修改日期

· 有些服務(wù)器的文檔可能在1秒鐘之內(nèi)就產(chǎn)生變化了，而Last-Modified只能精確到秒，在某些場(chǎng)合下不夠精準(zhǔn)

如果同時(shí)使用ETag和Last-Modified兩種驗(yàn)證方式，服務(wù)器會(huì)優(yōu)先驗(yàn)證ETag對(duì)應(yīng)的If-None-Match請(qǐng)求首部，如果ETag相同，才會(huì)去驗(yàn)證Last-Modified

項(xiàng)目中遇到問題的解釋：

如果設(shè)置的是no-store，瀏覽器每次都會(huì)請(qǐng)求新的；如果是no-cache，瀏覽器會(huì)優(yōu)先走304協(xié)商緩存；如果這兩個(gè)都沒設(shè)置，而是設(shè)置了max-age，那在過期時(shí)間之內(nèi)，瀏覽器不會(huì)發(fā)送請(qǐng)求到服務(wù)器，直接使用本地的。當(dāng)然如果是cmd+r刷新，是會(huì)請(qǐng)求新資源的。

如果不向服務(wù)器請(qǐng)求，瀏覽器就拿不到新資源的。form請(qǐng)求能拿到返回code，但是返回值我們是拿不到的；ajax可以拿到。（所以那個(gè)上傳文件的組件，form請(qǐng)求失敗，需要前端重定向）所以form沒有跨域問題，而ajax有跨域問題。而跨域是說請(qǐng)求發(fā)送到了服務(wù)器，而我們拿不到返回值而已。瀏覽器覺得跨域拿返回值是危險(xiǎn)的。window.open和輸入url是一樣的。

如果后端正確設(shè)置了index.html的cache-control規(guī)則，是不需要強(qiáng)刷的。后端對(duì)index.html設(shè)置cache-control: no-cache,no-store，瀏覽器每次都請(qǐng)求新的html資源，這樣用戶就會(huì)請(qǐng)求新的js和css了（上次是這個(gè)規(guī)則沒設(shè)置，所以要強(qiáng)刷）。如果強(qiáng)緩存未過期，在最近一段時(shí)間內(nèi)加載過這個(gè)文件，就會(huì)from memory，否則就是from disk；from cache也是從緩存里讀取。最終都是強(qiáng)緩存，沒有請(qǐng)求服務(wù)器。304是向服務(wù)器做了協(xié)商緩存驗(yàn)證，如果沒更新才會(huì)使用本地資源。

（上次那個(gè)沒權(quán)限用戶總是走緩存的問題，meta頭，后端沒設(shè)置。所以后面自己設(shè)置了，并且在登錄回調(diào)那里把index.html加上時(shí)間戳。）

作者：快樂的程序媛
來源：CSDN
原文：https://blog.csdn.net/qianqianstd/article/details/75907082
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接！

總結(jié)

以上是生活随笔為你收集整理的cache 强缓存与弱缓存区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。