瀏覽器 HTTP 快取原理分析

2021-07-07 04:24:18 字數 2936 閱讀 9742

**:

以前專案中遇到了很多瀏覽器快取相關的問題,也在網上查過資料,搞過伺服器的配置,來確保客戶端載入伺服器資源的速度和資源有效性。最近仔細看了下http協議中和快取相關的一些屬性,總結一下。

①瀏覽器第一次訪問伺服器資源 /index.html

在瀏覽器中沒有快取檔案,直接向伺服器傳送請求。

伺服器返回  200 ok,實體中返回 index.html檔案內容,並設定乙個快取過期時間,乙個檔案修改時間,乙個根據index.html內容計算出來的實體標記entity tag,簡稱etag。

瀏覽器將/index.html路徑的請求快取到本地。

②瀏覽器第二次訪問伺服器資源 /index.html

由於本地已經有了此路徑下的快取檔案,所以這一次就不直接向伺服器傳送請求了。

首先,進行快取過期判斷

。瀏覽器根據①中設定快取過期時間判斷快取檔案是否過期。

情景一:若沒有過期,則不向伺服器傳送請求,直接使用快取中的結果,此時我們在瀏覽器控制台中可以看到  200 ok(from cache) ,此時的情況就是完全使用快取,瀏覽器和伺服器沒有任何互動的。

情景二:若已過期,則向伺服器傳送請求,此時請求中會帶上①中設定的檔案修改時間,和etag

然後,進行資源更新判斷

。伺服器根據瀏覽器傳過來的檔案修改時間,判斷自瀏覽器上一次請求之後,檔案是不是沒有被修改過;根據etag,判斷檔案內容自上一次請求之後,有沒有發生變化

情形一:若兩種判斷的結論都是檔案沒有被修改過,則伺服器就不給瀏覽器發index.html的內容了,直接告訴它,檔案沒有被修改過,你用你那邊的快取吧—— 304 not modified,此時瀏覽器就會從本地快取中獲取index.html的內容。此時的情況叫協議快取,瀏覽器和伺服器之間有一次請求互動。

情形二:若修改時間和檔案內容判斷有任意乙個沒有通過,則伺服器會受理此次請求,之後的操作同①

我的文字表達能力可能有限,為了盡量把這個流程描述清楚一點,下面

① cache-control  用來做

快取過期判斷

常用指令:

no-cache  不直接使用快取,始終向伺服器發起請求

max-age  快取過期時間,是乙個時間數值,比如3600秒,設定為0的時候效果等同於no-cache

s-maxage  給快取**用的指令,對直接返回資源的server無效,當s-maxage生效時,會忽略max-age的值

only-if-cached 若有快取,則只使用快取,若快取檔案出問題了,請求也會出問題

② pragma  

用來做快取過期判斷

它可以取值no-cache

這是乙個http1.0遺留的字段,當它和cache-control同時存在的時候,會被cache-control覆蓋

③ if-match / if-none-match  用來做

資源更新判斷

這個指令會把快取中的etag傳給伺服器,伺服器用它來和伺服器端的資源etag進行對比,若不一致則證明資源被修改了,需要響應請求為 200 ok

④ if-modified-since  用來做資源更新判斷

這個指令會把檔案的上一次快取中的檔案的更新時間傳給伺服器,伺服器判斷檔案在這個時間點後是否被修改,如果被修改過則需要響應請求為200 ok

① cache-control  用來設定快取過期時間

常用指令:

no-cache  讓客戶端不直接使用快取,始終向伺服器發起請求,不設定預設是這個,上邊截圖中的請求就是省略了,所以客戶端不會直接使用快取。

max-age  快取過期時間,是乙個時間數值,比如3600秒,設定為0的時候效果等同於no-cache

s-maxage  給快取**用的指令,對直接返回資源的server無效,當s-maxage生效時,會忽略max-age的值

private/public  預設是private,只在乙個瀏覽器中快取,設定為public時快取可被多個使用者共享

② etag 用來

設定根據資源內容生成的實體標籤

這個值有強tag和弱tag,區別是計算方式不同,只有強tag才會在資源被更新的時候立即發生變化,請求首部中的if-match/if-none-match欄位就會傳回這個值給服務端

③ age 

這個字段用來告訴客戶端,這個response是在多久前被建立的,單位為秒,快取伺服器返回資源的時候必須建立此欄位

response的head裡邊可能還包括實體首部,實體首部是緊跟在response首部後邊的。

①last-modified-time ——用來設定資源最後修改時間

②exprire —— 設定檔案過期時間

這個欄位的作用和cache-control相同,不同的是它直接指定乙個快取過期時間點,容易受客戶端時間的影響。

這也是乙個遺留的字段,和cache-control同時存在的時候會被後者覆蓋

① 只有get請求會被快取,post請求不會

② etag 在資源分布在多台機器上時,對於同乙個資源,不同伺服器生成的etag可能不相同,此時就會導致304協議快取失效,客戶端還是直接從server取資源。可以自己修改伺服器端etag的生成方式,根據資源內容生成同樣的etag。

④ 觀察chrome的表現發現,通過鏈結或者位址列訪問,會先判斷快取是否過期,再判斷緩資源是否更新;f5重新整理,會跳過快取過期判斷,直接請求伺服器,判斷資源是否更新。

目前只能回憶起這些了,以後遇到了再補充吧~

瀏覽器 HTTP 快取原理分析

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

瀏覽器HTTP快取原理分析

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

瀏覽器與HTTP網路協議快取原理分析

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