瀏覽器快取實現原理

2021-09-01 18:04:50 字數 3402 閱讀 5360

瀏覽器快取將檔案儲存在客戶端,好的快取策略可以減少對網路頻寬的占用,可以提高訪問速度,提高使用者的體驗,還可以減輕伺服器的負擔。因此我們有必要了解它的實現原理,用來提高**的效能。

當乙個客戶端請求web伺服器, 請求的內容可以從以下幾個地方獲取:伺服器、瀏覽器快取中或快取伺服器中。這取決於伺服器端輸出的頁面資訊。頁面檔案有三種快取狀態。

1.最新的:選擇不快取頁面,每次請求時都從伺服器獲取最新的內容。

2.未過期的:在給定的時間內快取,如果使用者重新整理或頁面過期則去伺服器請求,否則將讀取本地的快取,這樣可以提高瀏覽速度。

3.過期的:也就是陳舊的頁面,當請求這個頁面時,必須進行重新獲取。

頁面的快取狀態是由http header決定的,乙個瀏覽器請求資訊,乙個是伺服器響應資訊。主要包括pragma: no-cache、cache-control、 expires、 last-modified、if-modified-since。其中pragma: no-cache由http/1.0規定,cache-control由http/1.1規定。

cache-control的主要引數

cache-control: private/public public 響應會被快取,並且在多使用者間共享。 private 響應只能夠作為私有的快取,不能再使用者間共享。

cache-control: no-cache:不進行快取

cache-control: max-age=x:快取時間 以秒為單位

cache-control: must-revalidate:如果頁面是過期的 則去伺服器進行獲取。

expires:顯示的設定頁面過期時間

last-modified:請求物件最後一次的修改時間 用來判斷快取是否過期 通常由檔案的時間資訊產生

if-modified-since :客戶端傳送請求附帶的資訊 指瀏覽器快取請求物件的最後修改日期 用來和伺服器端的last-modified做比較

乙個不進行快取的伺服器端響應

有時候僅僅設定pragma: no-cache cache-control: no-cache 還是不保險,需要將過期時間設定成過去的時間就確保了物件不被快取。

乙個允許快取的伺服器端響應

cache-control: max-age=43200 表示快取12個小時

我們來看乙個瀏覽器快取的具體例子

第一次請求檔案

這裡返回了last-modified和etag,這兩個資訊就是用來以後比較當前瀏覽器快取的檔案是否和伺服器端檔案一致,如果不一直就獲取最新,一直則讀取本地快取。

第二次請求

請求中的if-none-match資訊就是第一次響應的etag,用來驗證和當前響應的etag是否一致。伺服器返回not modified,瀏覽器就讀取本地快取。

我們還可以使用專門快取伺服器來改善效能。他的原理和瀏覽器的快取原理一樣,所有的瀏覽器請求將由快取伺服器響應,快取伺服器可以用自己的快取檔案或獲取新的檔案來響應使用者的請求。因此有了快取伺服器的,將大大提高**的效能。

參考文章: by jecray

瀏覽器快取實現原理

瀏覽器快取將檔案儲存在客戶端,好的快取策略可以減少對網路頻寬的占用,可以提高訪問速度,提高使用者的體驗,還可以減輕伺服器的負擔。因此我們有必要了解它的實現原理,用來提高 的效能。當乙個客戶端請求web伺服器,請求的內容可以從以下幾個地方獲取 伺服器 瀏覽器快取中或快取伺服器中。這取決於伺服器端輸出的...

瀏覽器快取原理

瀏覽器快取分為強快取和協商快取。瀏覽器載入頁面的簡單流程如下 強快取通過http響應頭中的expires和cache control來控制。expires返回乙個絕對時間,代表此資源的失效時間 而cache control是相對時間,代表資源的有效期 秒 兩者可同時啟用,但cache control...

瀏覽器 HTTP 快取原理分析

以前專案中遇到了很多瀏覽器快取相關的問題,也在網上查過資料,搞過伺服器的配置,來確保客戶端載入伺服器資源的速度和資源有效性。最近仔細看了下http協議中和快取相關的一些屬性,總結一下。瀏覽器第一次訪問伺服器資源 index.html 在瀏覽器中沒有快取檔案,直接向伺服器傳送請求。伺服器返回 200 ...