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

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

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

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

緩解帶寬瓶頸

網(wǎng)絡(luò)為本地網(wǎng)絡(luò)客戶端提供的帶寬比服務(wù)器提供的帶寬大很多?？蛻舳藭月窂缴献盥乃俣仍L問服務(wù)器。如果客戶端從本地或者局域網(wǎng)的緩存中得到了一份副本，那么緩存就可以提高性能，尤其在傳輸大文件時。

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

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

降低距離時延

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

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

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

· 解析：解析報文，提取首部

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

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

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

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

對于瀏覽器而言，整個過程又可以簡化：

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

· 否則發(fā)起請求，驗證本地副本是否足夠新鮮

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

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

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

cache-control首部

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

no-cache與no-store：

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

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

public 與 private：

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

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

max-age指令

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

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

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

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

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

expires首部

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

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

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

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

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

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

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

Last-Modified 與 If-Modified-Since首部

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

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

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

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

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

ETag與If-None-Match首部

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

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

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

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

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

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

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

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

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

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

項目中遇到問題的解釋：

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

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

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

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

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

總結(jié)

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

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