瀏覽器緩存

sixgo 發布于2019-08-21 18:19 / 408人閱讀

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

瀏覽器緩存

瀏覽器緩存分為強緩存和協商緩存

強緩存

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

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

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

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

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

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

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

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

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

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

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

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

協商緩存

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

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

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

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

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

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

(2). ETag & If-None-Match

ETag為相應頭部字段，表示資源內容的唯一標識，隨服務器response返回

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

協商緩存管理:

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

云服務器 GPU云服務器瀏覽器緩存清除瀏覽器緩存 cdn瀏覽器緩存 webrtc瀏覽器接收緩存

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90358.html

深入剖析瀏覽器緩存策略

摘要：瀏覽器緩存只存在于每個單獨的客戶端，因此它是私有緩存。表示該資源既能被瀏覽器緩存，也能被任何中間人比如代理服務器等緩存。普通刷新會啟用協商緩存，忽略強緩存。只有在地址欄或收藏夾輸入網址通過鏈接引用資源等情況下，瀏覽器才會啟用強緩存。前言在訪問一個網頁時，客戶端會從服務器下載所需的資源。但是有些資源很少發生變動，例如 HTML、JS、CSS、圖片、字體文件等。如果每次加載頁面都從源服...

Cympros 2019-08-06 13:41 評論0 收藏0
瀏覽器的緩存機制

摘要：從瀏覽器角度來看，整個就是一個源服務器，從這個層面來說，瀏覽器和服務器之間的緩存機制，在這種架構下同樣適用。如果命中，則返回，告訴瀏覽器資源未更新，可使用本地的緩存。緩存類型緩存在宏觀上可以分成兩類：私有緩存和共享緩存。共享緩存就是那些能被各級代理緩存的緩存。私有緩存就是用戶專享的，各級代理不能緩存的緩存。微觀上可以分下面幾類：瀏覽器緩存緩存存在的意義就是當用戶點擊back按...

LeanCloud 2019-08-06 13:41 評論0 收藏0
【前端基礎進階】瀏覽器的緩存機制

摘要：接下來的內容中我們將通過緩存位置緩存策略以及實際場景應用緩存策略來探討瀏覽器緩存機制。是運行在瀏覽器背后的獨立線程，一般可以用來實現緩存功能。在所有瀏覽器緩存中，覆蓋面基本是最大的。一、前言緩存可以說是性能優化中簡單高效的一種優化方式了。一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，并且由于緩存文件可以重復利用，還可以減少帶寬，降低網絡負荷。對于一個數據請求來說，可以分為...

Mertens 2019-08-23 15:32 評論0 收藏0
深入理解瀏覽器的緩存機制

摘要：接下來的內容中我們將通過緩存位置緩存策略以及實際場景應用緩存策略來探討瀏覽器緩存機制。是運行在瀏覽器背后的獨立線程，一般可以用來實現緩存功能。在所有瀏覽器緩存中，覆蓋面基本是最大的。一、前言緩存可以說是性能優化中簡單高效的一種優化方式了。一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，并且由于緩存文件可以重復利用，還可以減少帶寬，降低網絡負荷。對于一個數據請求來說，可以分...

binaryTree 2019-08-23 13:11 評論0 收藏0
深入理解瀏覽器的緩存機制

摘要：接下來的內容中我們將通過緩存位置緩存策略以及實際場景應用緩存策略來探討瀏覽器緩存機制。是運行在瀏覽器背后的獨立線程，一般可以用來實現緩存功能。在所有瀏覽器緩存中，覆蓋面基本是最大的。一、前言緩存可以說是性能優化中簡單高效的一種優化方式了。一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，并且由于緩存文件可以重復利用，還可以減少帶寬，降低網絡負荷。對于一個數據請求來說，可以分...

mikasa 2019-08-02 11:59 評論0 收藏0
深入理解瀏覽器的緩存機制

摘要：接下來的內容中我們將通過緩存位置緩存策略以及實際場景應用緩存策略來探討瀏覽器緩存機制。是運行在瀏覽器背后的獨立線程，一般可以用來實現緩存功能。在所有瀏覽器緩存中，覆蓋面基本是最大的。一、前言緩存可以說是性能優化中簡單高效的一種優化方式了。一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，并且由于緩存文件可以重復利用，還可以減少帶寬，降低網絡負荷。對于一個數據請求來說，可以分...

draveness 2019-08-29 17:16 評論0 收藏0