透過瀏覽器看HTTP快取

2021-07-09 19:38:11 字數 2961 閱讀 2166

web端的快取機制其實有多種,我在這裡只是學習和整理了以瀏覽器為載體的http快取機制,看看它是如何工作的。

1.1 資料庫快取

我們可能聽說過memcached,它就是一種資料庫層面的快取方案。資料庫快取是指,當web應用的關係比較複雜,資料庫中的表很多的時候,如果頻繁進行資料庫查詢,很容易導致資料庫不堪重荷。為了提供查詢的效能,將查詢後的資料放到記憶體中進行快取,下次查詢時,直接從記憶體快取直接返回,提供響應效率。

1.2 cdn快取

cdn快取一般是由**管理員自己部署,為了讓他們的**更容易擴充套件並獲得更好的效能。通常情況下,瀏覽器先向cdn閘道器發起web請求,閘道器伺服器後面對應著一台或多台負載均衡

源伺服器,會根據它們的負載請求,動態將請求**到合適的源伺服器上。從瀏覽器角度來看,整個cdn就是乙個源伺服器,從這個層面來說,瀏覽器和伺服器之間的快取機制,在這種架構下同樣適用。

1.3 **伺服器快取

**伺服器是瀏覽器和源伺服器之間的中間伺服器,瀏覽器先向這個中間伺服器發起web請求,經過處理後(比如許可權驗證,快取匹配等),再將請求**到源伺服器。**伺服器快取的運作原理跟瀏覽器的運作原理差不多,只是規模更大。

1.4 瀏覽器快取

每個瀏覽器都實現了 http 快取,我們通過瀏覽器使用http協議與伺服器互動的時候,瀏覽器就會根據一套與伺服器約定的規則進行快取工作。

1.5 應用層快取

應用層快取是指我們在**層面上做的快取。通過**邏輯,把曾經請求過的資料或資源等,快取起來,再次需要資料時通過邏輯上的處理選擇可用的快取的資料。

我們知道通過http協議,在客戶端和瀏覽器建立連線時需要消耗時間,而大的響應需要在客戶端和伺服器之間進行多次往返通訊才能獲得完整的響應,這拖延了瀏覽器可以使用和處理內容的時間。這就增加了訪問伺服器的資料和資源的成本,因此利用瀏覽器的快取機制重用以前獲取的資料就變成了效能優化時需要考慮的事情。

那麼有什麼建議嗎?當然。

為每個資源指定乙個明確的快取策略,用以定義資源是否可以快取,由誰來快取,可以快取多久,並且在快取時間到期時如何有效地重新驗證。當伺服器返回乙個響應時,它需要在響應頭中提供cache-control和etag。

說到瀏覽器中的快取機制,其實就相當於http協議定義的快取機制,因為瀏覽器為我們實現了它。一般情況下我們會想到到http響應頭中的expires,cache-control,last-modified.if-modified-since,etag這樣的與快取相關的響應頭資訊。

但是這裡我們說伺服器返回乙個響應時提供必要的cache-control和etag即可。這是為什麼呢?

因為cache-control與expires的作用一致,last-modified與etag的作用也相近。但它們有以下區別:

現在預設瀏覽器均預設使用http 1.1,所以expires和last-modified的作用基本可以忽略,具備cache-control和etag即可。

當然使用者的行為也會影響瀏覽器的快取,像這樣:

但我們先不考慮使用者的操作的影響,來看看伺服器提供cache-control和etag響應頭來進行的快取是如何工作的。

通常情況下,請求乙個資源的過程大概是這樣的:

我在 再看ajax  中整理了http請求的請求頭和響應頭的一些引數,這裡就看下etag的作用。

3.1 etag的主要作用

伺服器通過 etag http 頭傳遞驗證碼,大概是像『『x123cef』』這樣的字串。當瀏覽器在資源過期後再次請求時,瀏覽器缺省會通過if-none-match傳遞etag的驗證碼,通過驗證碼可以進行高效的資源更新檢查:如果資源未更改,則不會傳輸任何資料。

etag就主要用來在響應過期之後,驗證資源是否被修改。

3.2 etag的工作原理

伺服器響應瀏覽器請求時響應頭中的cache-control響應頭使得每個資源都可以通過 cache-control http 頭來定義自己的快取策略,cache-control 指令用來告訴我們,那個資源在什麼條件下可以快取,以及可以快取多久。

4.1 cache-control頭引數的含義(響應頭中的cache-control)

3 public : 如果響應被標記為public,即使有關聯的 http 認證,甚至響應狀態碼無法正常快取,響應也可以被快取。

4 private : 瀏覽器可以快取private響應,但是通常只為單個使用者快取,因此,不允許任何**伺服器對其進行快取 。比如,使用者瀏覽器可以快取包含使用者私人資訊的 html 網頁,但是 cdn 不能快取。

5 max-age : 用來設定資源被快取的最長時間(單位是秒)。

4.2 如何使用cache-control

通常,我們可以通過下圖的流程來設定合適的響應頭的cache-control頭。

一般情況下,瀏覽器發出的所有 http 請求會首先被路由到瀏覽器的快取,以檢視是否快取了可以用於實現請求的有效響應。如果有匹配的響應,會直接從快取中讀取響應,這樣就避免了網路延遲以及傳輸產生的資料成本。然而,如果我們希望更新或廢棄已快取的響應,該怎麼辦?

假設我們已經告訴訪問者某個 css 樣式表快取長達 24 小時 (max-age=86400),但是設計人員剛剛提交了乙個更新,我們希望所有使用者都能使用。我們該如何通知所有訪問者快取的 css 副本已過時,需要更新快取?

實際上以前沒有請求過該資源的新的使用者會得到更新的資源,但是請求過資源的使用者將在過期時間達到之前一直得到舊的被快取的資源,直到他手動的去清理了瀏覽器的快取。手動清理瀏覽器快取這種事可能只有程式設計師

才會做,那麼我們要怎麼做才能讓使用者得到更新後的資源呢?

我在瀏覽資料的時候發現了乙個caching checklist,比較具有參考價值,我們可以遵循建議合理的利用快取機制:

2 確保伺服器提供驗證碼 (etag):通過驗證碼,如果伺服器上的資源未被更改,就不必傳輸相同的位元組。

3 確定**快取可以快取哪些資源:對所有使用者的響應完全相同的資源很適合由 cdn 或其他**快取進行快取。

4 確定每個資源的最優快取週期:不同的資源可能有不同的更新要求。審查並確定每個資源適合的 max-age。

**:

透過瀏覽器看HTTP快取

web端的快取機制其實有多種,我在這裡只是學習和整理了以瀏覽器為載體的http快取機制,看看它是如何工作的。我們可能聽說過memcached,它就是一種資料庫層面的快取方案。資料庫快取是指,當web應用的關係比較複雜,資料庫中的表很多的時候,如果頻繁進行資料庫查詢,很容易導致資料庫不堪重荷。為了提供...

http快取 瀏覽器快取

如果以下題目都能快速回答,那此文章也就沒有必要要看啦 1.講一下http快取 強快取,協商快取 2.如何控制強 協商快取 expires,cache control,etag if none match,if modified sine last modified 3.cache control有哪...

瀏覽器http快取

強快取 強快取命中不會傳送請求到伺服器端,直接從本地快取中獲取資源,狀態碼200 from cache 協商快取 協商快取會傳送請求到伺服器,伺服器通過請求頭部欄位來驗證資源是否命中協商快取,如果命中,則返回狀態碼304 not modified 通知瀏覽器從快取中獲取資源 4.1 last mod...