目錄

• 1 緩存定義及其優(yōu)點(diǎn)
• 2 強(qiáng)緩存
• • 2.1 expires 和 Cache-Control
• 3 協(xié)商緩存
• 4 瀏覽器緩存位置

1 緩存定義及其優(yōu)點(diǎn)

什么是緩存？

當(dāng)我們第一次訪問網(wǎng)站的時(shí)候，電腦會把網(wǎng)站上的圖片和數(shù)據(jù)下載到電腦上，當(dāng)我們再次訪問的時(shí)候，網(wǎng)站就會從電腦中直接加載出來，這就是緩存。比如我們訪問網(wǎng)頁點(diǎn)擊后退功能的時(shí)候，加載的非常快，這就是緩存的優(yōu)勢。

緩存優(yōu)點(diǎn)：

1 緩存服務(wù)器壓力，不用每次都去請求某些數(shù)據(jù)了

2 提升性能，打開本地資源肯定會比請求服務(wù)器更快

3 減少帶寬消耗，當(dāng)我們使用緩存時(shí)，只會產(chǎn)生很小的網(wǎng)絡(luò)消耗。

瀏覽器緩存過程：

強(qiáng)緩存

協(xié)商緩存

強(qiáng)緩存與協(xié)商緩存的區(qū)別：

強(qiáng)緩存不發(fā)請求到服務(wù)器，所以有時(shí)候資源更新了瀏覽器還不知道，但是協(xié)商緩存會發(fā)請求到服務(wù)器，所以資源是否更新，服務(wù)器肯定知道。

大部分web服務(wù)器都默認(rèn)開啟協(xié)商緩存

瀏覽器緩存位置

Service Worker

Memory Cache

Disk Cache

Push Cache

2 強(qiáng)緩存

???????強(qiáng)緩存是當(dāng)我們訪問URL的時(shí)候，不會向服務(wù)器發(fā)送請求，直接從緩存中讀取資源，但是會返回200的狀態(tài)碼。

如何設(shè)置強(qiáng)緩存？

???????我們第一次進(jìn)入頁面，請求服務(wù)器，服務(wù)器會進(jìn)行應(yīng)答，瀏覽器根據(jù)服務(wù)器的應(yīng)答respon Header來判斷是否對資源進(jìn)行緩存，如果響應(yīng)頭中有expires、pragma或cache-control字段，代表是強(qiáng)緩存，瀏覽器就會把資源緩存在memory cache 或 disk cache中。

???????第二次請求時(shí)，瀏覽器判斷請求參數(shù)，如果符合強(qiáng)緩存條件就直接返回狀態(tài)碼200，從本地緩存中拿數(shù)據(jù)。否則把響應(yīng)參數(shù)存在request header請求中，看是否符合協(xié)商緩存，符合則返回狀態(tài)碼304，不符合則服務(wù)器返回全新資源。

2.1 expires 和 Cache-Control

Cache-Control 是HTTP1.1 中新增的響應(yīng)頭

Expires 是HTTP1.0 中的響應(yīng)頭

Cache-Control 使用的是相對時(shí)間

Expires 指定的是具體的過期時(shí)間而不是秒數(shù)。

Cache-Control 和 Expires同時(shí)使用的話，Cache-Control 會覆蓋Expires

???????Expires：設(shè)置瀏覽器緩存時(shí)間，時(shí)間是絕對時(shí)間，從設(shè)置的值上可以看出是個(gè)日期，瀏覽器收到Response時(shí)看看有沒有Expires字段有的話緩存頭信息和資源，再次請求時(shí)查看緩存時(shí)間過沒過，沒過在緩存拿出來，過了重新請求。

Cache-Control都可以設(shè)置哪些屬性

max-age（單位為s）：指定設(shè)置緩存最大的有效時(shí)間，定義的是時(shí)間長短。當(dāng)瀏覽器向服務(wù)器發(fā)送請求后，在max-age這段時(shí)間里瀏覽器就不會再向服務(wù)器發(fā)送請求了。

public : 指定響應(yīng)可以在代理緩存中被緩存，于是可以被多用戶共享。如果沒有明確指定private，則默認(rèn)為public。

private : 響應(yīng)只能在私有緩存中被緩存，不能放在代理緩存上。對一些用戶信息敏感的資源，通常需要設(shè)置為private。

no-cache : 表示必須先與服務(wù)器確認(rèn)資源是否被更改過（依靠If-None-Match和Etag），然后再決定是否使用本地緩存。

no-store : 絕對禁止緩存任何資源，也就是說每次用戶請求資源時(shí)，都會向服務(wù)器發(fā)送一個(gè)請求，每次都會下載完整的資源。通常用于機(jī)密性資源。

服務(wù)端如何判斷緩存已失效？

瀏覽器或代理緩存中緩存的資源過期了，并不意味著它和原始服務(wù)器上的資源有實(shí)際的差異，僅僅意味著到了要進(jìn)行核對的時(shí)間了。這種情況被稱為服務(wù)器再驗(yàn)證。

如果資源發(fā)生變化，則需要取得新的資源，并在緩存中替換舊資源。

如果資源沒有發(fā)生變化，緩存只需要獲取新的響應(yīng)頭，和一個(gè)新的過期時(shí)間，對緩存中的資源過期時(shí)間進(jìn)行更新即可

HTTP1.1推薦使用的驗(yàn)證方式是If-None-Match/Etag，在HTTP1.0中則使用If-Modified-Since/Last-Modified。

3 協(xié)商緩存

觸發(fā)條件：

Cache-Control 的值為 no-cache （不強(qiáng)緩存） 或者 max-age 過期了 （強(qiáng)緩存，但總有過期的時(shí)候）

當(dāng)瀏覽器判斷不是強(qiáng)緩存，就會向服務(wù)器發(fā)請求，判斷是否是協(xié)商緩存。如果是，服務(wù)器會返回304 Not Modified，瀏覽器從緩存中加載。

Last-Modified和If-Modified-Since字段：

1、瀏覽器第一次向服務(wù)器發(fā)請求，服務(wù)器返回資源并在response header加上Last-Modified字段，表示資源最后修改的時(shí)間。
2、瀏覽器再次請求這個(gè)資源時(shí)，請求頭會加上If-Modified-Since字段。若這兩個(gè)字段一樣，說明資源沒有修改過，返回304Not Modified，瀏覽器從緩存中獲取資源。若這兩個(gè)字段不一樣，說明資源修改過，服務(wù)器正常返回資源。

ETag、If-None-Match：

但有時(shí)候服務(wù)器上資源有變化，單最后修改時(shí)間沒更新，則引出下面兩個(gè)字段。
1、瀏覽器第一次向服務(wù)器請求，服務(wù)器返回資源并在response header上加ETag字段。表示資源本身，資源有變化，則該字段有變化。
2、瀏覽器再次向服務(wù)器請求這個(gè)資源時(shí)，請求頭攜帶If-None-Match字段。若這兩個(gè)字段相同，則代表資源沒有變化，服務(wù)器返回304Not Modified，瀏覽器從緩存中加載。若兩個(gè)字段不同，證明資源有變動，服務(wù)器正常返回資源。

4 瀏覽器緩存位置

????????查找瀏覽器緩存時(shí)會按順序查找: Service Worker–>Memory Cache–>Disk Cache–>Push Cache。

1 Service Worker

是運(yùn)行在瀏覽器背后的獨(dú)立線程，一般可以用來實(shí)現(xiàn)緩存功能。使用 Service Worker的話，傳輸協(xié)議必須為 HTTPS。因?yàn)?Service Worker 中涉及到請求攔截，所以必須使用 HTTPS 協(xié)議來保障安全。Service Worker 的緩存與瀏覽器其他內(nèi)建的緩存機(jī)制不同，它可以讓我們自由控制緩存哪些文件、如何匹配緩存、如何讀取緩存，并且緩存是持續(xù)性的

2 Memory Cache

內(nèi)存中的緩存，主要包含的是當(dāng)前中頁面中已經(jīng)抓取到的資源，例如頁面上已經(jīng)下載的樣式、腳本、圖片等。讀取內(nèi)存中的數(shù)據(jù)肯定比磁盤快，內(nèi)存緩存雖然讀取高效，可是緩存持續(xù)性很短，會隨著進(jìn)程的釋放而釋放。一旦我們關(guān)閉 Tab 頁面，內(nèi)存中的緩存也就被釋放了。

3 Disk Cache

存儲在硬盤中的緩存，讀取速度慢點(diǎn)，但是什么都能存儲到磁盤中，比之 Memory Cache 勝在容量和存儲時(shí)效性上。
???????在所有瀏覽器緩存中，Disk Cache 覆蓋面基本是最大的。它會根據(jù) HTTP Herder 中的字段判斷哪些資源需要緩存，哪些資源可以不請求直接使用，哪些資源已經(jīng)過期需要重新請求。并且即使在跨站點(diǎn)的情況下，相同地址的資源一旦被硬盤緩存下來，就不會再次去請求數(shù)據(jù)。絕大部分的緩存都來自 Disk Cache。

4 Push Cache

Push Cache（推送緩存）是 HTTP/2 中的內(nèi)容，當(dāng)以上三種緩存都沒有命中時(shí)，它才會被使用。它只在會話（Session）中存在，一旦會話結(jié)束就被釋放，并且緩存時(shí)間也很短暫，在Chrome瀏覽器中只有5分鐘左右，同時(shí)它也并非嚴(yán)格執(zhí)行HTTP頭中的緩存指令。

5 CPU、內(nèi)存、硬盤

這里提到了硬盤，內(nèi)存，可能有些小伙伴對硬盤，內(nèi)存沒什么直觀的概念。
???????CPU、內(nèi)存、硬盤都是計(jì)算機(jī)的主要組成部分。
???????CPU：中央處理單元(CntralPocessingUit)的縮寫，也叫處理器，是計(jì)算機(jī)的運(yùn)算核心和控制核心。電腦靠CPU來運(yùn)算、控制。讓電腦的各個(gè)部件順利工作，起到協(xié)調(diào)和控制作用。
???????硬盤：存儲資料和軟件等數(shù)據(jù)的設(shè)備，有容量大，斷電數(shù)據(jù)不丟失的特點(diǎn)。
???????內(nèi)存：負(fù)責(zé)硬盤等硬件上的數(shù)據(jù)與CPU之間數(shù)據(jù)交換處理。特點(diǎn)是體積小，速度快，有電可存，無電清空，即電腦在開機(jī)狀態(tài)時(shí)內(nèi)存中可存儲數(shù)據(jù)，關(guān)機(jī)后將自動清空其中的所有數(shù)據(jù)。

參考鏈接

總結(jié)

以上是生活随笔為你收集整理的前端浏览器缓存机制的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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