瀏覽器緩存--瀏覽器三級緩存

瀏覽器緩存--瀏覽器三級緩存_瀏覽器緩存用來干什么的-CSDN博客

一、什么是瀏覽器緩存

瀏覽器緩存就是將通過HTTP請求獲取的資源保存在本地的一種行為。瀏覽器對之前請求過的文件進行緩存，以便再次訪問的時候提高頁面展示的速度。

緩存的好處

1、緩解服務器壓力，不用每次都去請求某些數據了。

2、提升前端性能，提高訪問速度，打開本地資源肯定會比請求服務器來的快。

3、減少帶寬消耗，當我們使用緩存時，只會產生很小的網絡消耗。

（打開本地資源也會產生網絡消耗）

二、緩存的位置

瀏覽器緩存的位置一般為四類：Server Worker、Memory Cache、Disk Cache、Push Cache

1、Server Worker

Server Worker 是運行在瀏覽器的獨立線程，一般用來緩存。Server Worker 涉及請求攔截，so傳輸協議是HTTPS來保障安全。

Server Worker 是“外建”的緩存機制，可以自由控制緩存哪些文件、如何匹配緩存、如何讀取緩存，并且緩存是持續性的，這是與其他內建緩存機制的區別。

2、Memory Cache–內存緩存

內存中的緩存，主要包含的是當前中頁面中已經抓取到的資源，例如頁面上已經下載的樣式、腳本、圖片等，占據該進程一定的內存資源，但是緩存持續性很短，會隨著進程的釋放而釋放。一旦我們關閉 Tab 頁面，內存中的緩存也就被釋放了。

內存緩存特點：①讀取速度快 ②時效性：頁面關閉進程的內存清空釋放

3、Disk Memory–磁盤緩存

硬盤中的緩存。在所有瀏覽器緩存中，Disk Cache 覆蓋面基本是最大的，絕大部分的緩存都來自 Disk Cache。為什么呢？cuz根據 HTTP Herder 中的字段判斷哪些資源需要緩存，哪些資源可以不請求直接使用，哪些資源已經過期需要重新請求。在跨站點的情況下，相同地址的資源一旦被硬盤緩存下來，就不會再次去請求數據。

硬盤緩存比內存緩存讀取速度慢，讀取需要對硬盤進行I/O操作，會導致重新解析緩存內容，造成讀取路的復雜。

4、Push Cache

推送緩存，是HTTP/2的內容，并沒有嚴格執行HTTP頭部的緩存指令。在Server Worker、Memory Cache、Disk Cache都沒有命中的時候，它會被使用。在Session中存在，Session結束就會被釋放，緩存時間短暫。

三、三級緩存原理 (訪問緩存優先級)

1、先在內存中查找，如果有，直接加載。

2、如果內存中不存在，則在硬盤中查找，如果有直接加載。

3、如果硬盤中也沒有，那么就進行網絡請求。

4、請求獲取的資源緩存到硬盤和內存。

四、瀏覽器緩存的分類

1、強緩存

瀏覽器在加載資源時，會先根據本地緩存資源的 header 中的信息判斷是否命中強緩存，如果命中則直接使用緩存中的資源不會再向服務器發送請求并返回200。

在chrome控制臺的Network選項中可以看到該請求返回200的狀態碼，并且Size顯示from disk cache或from memory cache。強緩存可以通過設置兩種 HTTP Header 實現：Expires 和 Cache-Control。

(1)Expires

http1.0規范，它設置一個值絕對時間的GMT格式的時間字符串，這個是資源失效時間（客戶端的時間小于Expires的值），在這個時間之前都是名中緩存。

Expires:Mon,16 Oct 2066 23:59:59 GMT

1

缺陷：Expires控制緩存原理是客戶端的時間和服務端返回的時間作對比，若兩個時間偏差大的話，會造成強制緩存直接失效

(2)Cache-Control

http1.1規范，替代Expires，它利用的是相對時間，利用header信息字段的max-age值判斷。

max-age=5000//代表資源的有效期是5000秒

1

2、協商緩存

當強緩存沒有命中的時候，瀏覽器會發送一個請求到服務器，服務器根據 header 中的部分信息來判斷是否命中緩存。如果命中，則返回 304 ，告訴瀏覽器資源未更新，可使用本地的緩存。這里的 header 中的信息指的是 Last-Modify-------If-Modify-Since 和 ETag-------If-None-Match。

①Last-Modified

瀏覽器向服務器發送資源最后的修改時間

②If-Modified-Since

當資源過期時，發現響應頭具有Last-Modified聲明，則再次向服務器請求時帶上頭if-modified-since，表示請求時間。服務器收到請求后，發現有if-modified-since則與被請求資源的最后修改時間進行對比（Last-Modified）,若最后修改時間較新，說明資源又被改過，則返回最新資源，返回200；若最后修改時間較小，說明資源無新修改，返回304 ，使用緩存文件。

③ETag

http1.1屬性，由服務器生成返回給前端，幫助服務器控制web端的緩存驗證，服務器會生成并且返回當前資源文件的一個唯一標識

④If-None-Match

當資源過期時，發現響應頭具有Etag聲明，則再次向服務器請求時帶上頭if-none-match（唯一標識Etag值）。服務器收到該請求后，發現有If-None-Match則根據If-None-Match的字段值與該資源在服務器的Etag值做對比，一致則返回304，代表資源無更新，繼續使用緩存文件；不一致則重新返回資源文件，狀態碼為200。

緩存機制

強制緩存優先于協商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協商緩存由服務器決定是否使用緩存，若協商緩存失效，那么代表該請求的緩存失效，返回200，重新返回資源和緩存標識，再存入瀏覽器緩存中；生效則返回304，繼續使用緩存。具體流程如下。

If-Modify-Since：實際上就是上次返回資源的時間戳

**If-None-Match：**用來判斷請求頭中的If-None-Match是否等于響應頭中的 ETag，判斷資源是否相同。

Cache-Control:

Etag

瀏覽器中的 ETag（實體標簽）是一種用于Web資源的HTTP響應標識符。它是由服務器分配的，并且在資源的內容發生變化時會更新。瀏覽器使用 ETag 來檢查資源是否已經更改，以決定是否需要重新請求該資源或者直接使用緩存版本。

當瀏覽器請求一個資源時，服務器會在響應的頭部包含 ETag 值。瀏覽器將該值存儲在緩存中，然后在后續請求中將其發送給服務器。服務器使用收到的 ETag 來檢查資源是否與客戶端緩存的相同（請求頭中的If-None-Match是否等于響應頭中的 ETag）。如果資源沒有改變，服務器將返回一個指示資源未修改的狀態碼，并且瀏覽器可以使用緩存中的副本，從而減少網絡流量和加快頁面加載速度。

總結

強緩存和協商緩存的區別

①強緩存不發送請求到服務器，協商緩存發送請求到服務器

②強緩存資源更新瀏覽器不知道，因為沒有發送請求到服務器；協商緩存資源更新瀏覽器都知道，因為發送了請求到服務器

③大部分web默認用協商緩存

刷新對強緩存和協商緩存的區別

①當ctrl+f5強制刷新網頁時，直接從服務器加載，跳過強緩存和協商緩存

②當f5刷新網頁時，跳過強緩存，檢查協商緩存

③瀏覽器地址欄中寫入URL，不用請求直接走緩存，最快的速度

瀏覽器再次訪問一個資源

①看是否命中強緩存，命中使用強緩存

②沒有命中強緩存，發送請求到服務器看是否命中協商緩存

③若命中協商緩存，服務器返回304告訴瀏覽器可以使用本地緩存

④沒有命中協商緩存，返回最新的資源,返回200