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

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

一、什么是瀏覽器緩存

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

緩存的好處

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

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

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

（打開本地資源也會產(chǎn)生網(wǎng)絡消耗）

二、緩存的位置

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

1、Server Worker

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

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

2、Memory Cache–內存緩存

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

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

3、Disk Memory–磁盤緩存

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

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

4、Push Cache

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

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

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

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

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

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

四、瀏覽器緩存的分類

1、強緩存

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

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

(1)Expires

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

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

1

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

(2)Cache-Control

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

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

1

2、協(xié)商緩存

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

①Last-Modified

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

②If-Modified-Since

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

③ETag

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

④If-None-Match

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

緩存機制

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

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

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

Cache-Control:

Etag

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

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

總結

強緩存和協(xié)商緩存的區(qū)別

①強緩存不發(fā)送請求到服務器，協(xié)商緩存發(fā)送請求到服務器

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

③大部分web默認用協(xié)商緩存

刷新對強緩存和協(xié)商緩存的區(qū)別

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

②當f5刷新網(wǎng)頁時，跳過強緩存，檢查協(xié)商緩存

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

瀏覽器再次訪問一個資源

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

②沒有命中強緩存，發(fā)送請求到服務器看是否命中協(xié)商緩存

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

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