瀏覽器緩存

lijinke666 發(fā)布于2019-08-01 18:15 / 1835人閱讀

摘要：服務(wù)器通過這兩個首部字段告知客戶端資源的緩存過期時間和緩存最大生命周期。客戶端得知資源的緩存過期時間和最大生命周期后，即可自行判斷是否可不建立與服務(wù)器的鏈接，直接從瀏覽器緩存中獲取資源。

瀏覽器緩存

瀏覽器緩存分為強緩存和協(xié)商緩存

強緩存

客戶端第一次問服務(wù)器要某個資源時，服務(wù)器丟還給客戶端所請求的這個資源的同時，告訴客戶端將這個資源保存在本地，并且在未來的某個時點之前如果還需要這個資源，直接從本地獲取就可以，不用向服務(wù)器請求，這種方式緩存下來的資源稱為強緩存。

強緩存利用http的返回頭部中的Expires(實體首部字段)或者Cache-Control(通用首部字段)兩個字段來控制，用來表示資源的緩存時間。

服務(wù)器通過這兩個首部字段告知客戶端資源的緩存過期時間和緩存最大生命周期。

客戶端得知資源的緩存過期時間和最大生命周期后，即可自行判斷是否可不建立與服務(wù)器的鏈接，直接從瀏覽器緩存中獲取資源。

注：命中強緩存時，瀏覽器同樣會收到status=200的respones,chrome中可通過size區(qū)分從服務(wù)器返回的資源還是強緩存獲得的資源。

(1). Expires(http1.0的規(guī)范)

其值為一個絕對時間的GMT格式的時間字符串，代表緩存資源的過期時間，在該時點之前，即為命中緩存。

缺點：服務(wù)器返回的Expires時點是服務(wù)器上的時間，可能與客戶端有時間差，時間差太大可能造成緩存混亂

(2). Cache-Control:max-age(http1.1的規(guī)范)

強緩存利用其max-age值來判斷資源緩存的最大生命周期，它的值單位為秒。Cache-Control:max-age=3600代表資源有效時間為1小時，即從第一次獲取該資源起一小時內(nèi)的請求都被認(rèn)為可命中強緩存。

注：Cache-Control描述的是相對時間，采用本地時間來計算資源的有效期，所以相比Expires更可靠

這兩個Header可以只用其一，也可以一起使用。一起使用時以Cache-Control為準(zhǔn)

協(xié)商緩存

客戶端第一次問服務(wù)器要某個資源時，服務(wù)器丟給客戶端所請求的這個資源的同時，將該資源的一些信息(文件摘要、或最后修改時間)也返回給客戶端，告訴客戶端將這個資源緩存在本地。當(dāng)客戶端下一次需要這個資源時，將請求以及相關(guān)信息（文件摘要、或者最后修改時間）一并發(fā)送給服務(wù)器，由服務(wù)器來判斷客戶端緩存的資源是否需要更新：如不需要更新，就直接告訴客戶端獲取本地緩存資源；如需要更新，則將最新的資源連同相應(yīng)的信息一并返回給客戶端。

當(dāng)強緩存未命中時，瀏覽器就會發(fā)送請求到服務(wù)器，服務(wù)器會驗證協(xié)商緩存是否命中，如果協(xié)商緩存命中，請求返回的http狀態(tài)為304，并會顯示說明Not Modified，瀏覽器收到該返回后，就會從緩存中加載了。

協(xié)商緩存利用[Last-Modified , If-Modified-Since] 和 [ETag , If-None-Match]這兩對Header來管理。

(1). Last-Modified & If-Modified-Since

Last-Modified為實體首部字段，值為資源最后更新時間，隨服務(wù)器response返回。

If-Modified-Since為請求首部字段，通過比較兩個時間來判斷資源在兩次請求期間是否有過修改，如果沒有修改，則命中協(xié)商緩存，瀏覽器從緩存中獲取資源；如果有過修改，則服務(wù)器返回資源，同時返回新的Last-Modified時間

(2). ETag & If-None-Match

ETag為相應(yīng)頭部字段，表示資源內(nèi)容的唯一標(biāo)識，隨服務(wù)器response返回

If-None-Match為請求頭部字段，服務(wù)器通過比較請求頭部的If-None-Match與當(dāng)前資源的ETag是否一致來判斷資源是否在兩次請求之間有過修改，如果沒有修改，則命中協(xié)商緩存，瀏覽器從緩存中獲取資源；如果有過修改，則服務(wù)器返回資源，同時返回新的ETag

協(xié)商緩存管理:

    [Last-Modified , If-Modified-Since]和[ETag , If-None-Match]一般同時啟用，這是為了處理Last-Modified不可靠的情況。