一、瀏覽器緩存和http協(xié)議標(biāo)頭

1、緩存優(yōu)點：

• 提高網(wǎng)頁請求響應(yīng)的速度

• 降低服務(wù)器帶寬的占用

• 降低服務(wù)器的負載（主要指的是cpu 內(nèi)存這些硬件資源）占用

• 提高用戶的體驗度

• 降低用戶的焦慮

2、瀏覽器緩存是在用戶的disk（磁盤）或者內(nèi)存上面

3、瀏覽器的緩存原理

（1）當(dāng)網(wǎng)頁需要資源的時候，首先訪問瀏覽器緩存，如果瀏覽器緩存沒有數(shù)據(jù)時，那么就會請求服務(wù)器端，服務(wù)器進行響應(yīng)數(shù)據(jù)，瀏覽器就會同時把數(shù)據(jù)資源存儲起來，當(dāng)網(wǎng)頁再次需要這個資源的時候，還是先訪問瀏覽器緩存，發(fā)現(xiàn)有數(shù)據(jù)就會直接返回。

（2）原理圖：

4、瀏覽器緩存的五個概念

（1）瀏覽器：資源的請求方

（2）源服務(wù)器：就是后端服務(wù)器，真正資源的來源端，可以將內(nèi)容緩存到任何的位置。

（3）新鮮度：就是緩存數(shù)據(jù)的時間周期。

（4）檢驗值：緩存過期之后，會繼續(xù)請求服務(wù)端返回數(shù)據(jù)，將會對舊的緩存和新的數(shù)據(jù)內(nèi)容做對比，如果數(shù)據(jù)沒有變動，那么只需要更新緩存的過期時間，不需要更新緩存內(nèi)容。

（5）緩存失效：就是緩存過期并且緩存的內(nèi)容和新的內(nèi)容存在不同時，就會將新的內(nèi)容存儲到緩存中。

二、http協(xié)議標(biāo)頭

瀏覽器和服務(wù)器之間主要的通訊方式是http協(xié)議，所有的緩存策略都是在http標(biāo)頭中，每當(dāng)瀏覽器請求服務(wù)端時，服務(wù)都會在響應(yīng)報文中設(shè)置一段標(biāo)頭。

1、新鮮度相關(guān)的標(biāo)頭：cache-control、pragma、expires。

• cache-control： private、public、no-store、no-cache、max-age、s-max-age、must-revalidate、proxy-revalidate

  （1）private：內(nèi)容是對用戶私有的，只能在瀏覽器中緩存，而不能在服務(wù)器中緩存

  （2）public：表示可以在任何位置緩存

  （3）no-store：表示不可以被任何人緩存

  （4）no-cache：可以被緩存，但是需要內(nèi)容進行校驗

  （5）max-age：表示緩存的過期時間，單位為秒。

  （6）s-max-age：共享緩存的過期時間（代理服務(wù)器會使用這個時間）

  （7）must-revalidate：如果內(nèi)容緩存有效期超過了cache-control的max-age時間，必須讓請求服務(wù)器

  （8）proxy-revalidate：跟must-revalidate相同，不過用于代理服務(wù)器。

• pragma:設(shè)置no-cache數(shù)據(jù)就不會被緩存

• expires：設(shè)置緩存期限

2、檢驗值相關(guān)的標(biāo)頭：etag（entity tag 實體標(biāo)簽）、last-modified、if-none-match、if-modify、if-modified-since

• ETag：資源的唯一標(biāo)識符，緩存有效期過期后，再次請求服務(wù)器會附帶請求頭if-none-match，它的值就是上一次請求返回的ETag，然后服務(wù)器收到當(dāng)前的請求后，會將它的值跟新的內(nèi)容進行對比，如果不相同，返回新的ETag和新的資源數(shù)據(jù)，否則返回304狀態(tài)碼，表示沒有發(fā)生任何變化。

• last-modified：表示資源上一次修改的時間

三、強緩存和協(xié)商緩存

在http中可以通過控制http響應(yīng)頭來控制http客戶端的資源緩存，可分為兩大類：強緩存和協(xié)商緩存

1、強緩存

強緩存是通過響應(yīng)頭的cache-control中的max-age等指令進行控制，max-age可設(shè)置強緩存的時間周期，在此周期內(nèi)發(fā)送請求將直接從客戶端緩存獲取資源，而不會向服務(wù)器發(fā)送請求。

2、協(xié)商緩存

協(xié)商緩存可以通過響應(yīng)頭的ETag和last-modified進行控制，每次發(fā)送請求時，需要進行緩存新鮮度檢驗，如果資源過舊，那么直接從響應(yīng)中獲取新的資源返回狀態(tài)碼200 OK，否則從客戶端緩存獲取返回狀態(tài)碼304 Not Modified。新鮮度檢驗 通過請求頭if-none-match（上一次請求的ETag）與響應(yīng)頭的ETag進行對比，或者請求頭if-modified-since與響應(yīng)頭last-modified進行對比。

(1) if-none-match與ETag對比：每次發(fā)送請求就會攜帶上一次請求返回來的標(biāo)識if-none-match發(fā)送到服務(wù)器，服務(wù)器進行校驗標(biāo)識，如果if-none-match跟服務(wù)器的ETag不相符合，那么就返回200狀態(tài)碼、最新的資源和新的資源標(biāo)識。否則返回304狀態(tài)碼，從緩存中直接獲取。

(2) if-modified-since與last-modified對比：每次發(fā)送請求的時候都會攜帶上一次內(nèi)容更新的時間發(fā)送到服務(wù)器，服務(wù)器就會判斷請求的資源有沒有最新的修改，有就返回200狀態(tài)碼 OK并返回最新的更新時間和新的資源與標(biāo)識，否則返回304狀態(tài)碼 Not Modified 直接從緩存拿數(shù)據(jù)。

（3） ETag和Last-Modified的區(qū)別

優(yōu)先使用ETag

1、last-modified 的值只能精確到秒

2、文件如果每隔一段時間都會重復(fù)生成，但是內(nèi)容相同。服務(wù)器就會檢測到新的時間更新，last-modified都會每次返回200和新的資源文件與資源標(biāo)識，即便內(nèi)容相同。但ETag能判斷出文件的內(nèi)容相同，就會返回304，使用緩存。

總結(jié)

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

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