瀏覽器快取問題原理以及解決方案

2022-02-25 12:06:34 字數 2371 閱讀 4005

瀏覽器快取問題:

為什麼使用快取:

(1)減少網路頻寬消耗

(2)降低伺服器壓力

(3)減少網路延遲,加快頁面開啟速度

瀏覽器端的快取規則:

新鮮度(過期機制):也就是快取副本有效期。

校驗值(驗證機制):資源的實體標籤etag(entitytag)

舉個栗子

解決方法:

(1)使用htmlmeta標籤

web開發者可以在html頁面的節點中加入標籤,**如下

事實上這種禁用快取的形式用處很有限:

a.僅有ie才能識別這段meta標籤含義,其它主流瀏覽器僅識別「cache-control:no-store」的meta標籤。

b.在ie中識別到該meta標籤含義,並不一定會在請求字段加上pragma,但的確會讓當前頁面每次都發新請求(僅限頁面,頁面上的資源則不受影響)。

(2)使用快取有關的http訊息報頭

在http請求和響應的訊息報頭中,常見的與快取有關的訊息報頭有:

規則訊息包頭

值/示例

型別作用

新鮮度

pragma

no-cache

響應告訴瀏覽器忽略資源的快取副本,每次訪問都需要去伺服器拉取【http1.0中存在的字段,在http1.1已被拋棄,使用cache-control替代,但為了做http協議的向下相容,很多**依舊會帶上這個字段】

expires

mon,15aug201603:56:47gmt

響應啟用快取和定義快取時間。告訴瀏覽器資源快取過期時間,如果還沒過該時間點則不發請求【http1.0中存在的字段,該字段所定義的快取時間是相對伺服器上的時間而言的,如果客戶端上的時間跟伺服器上的時間不一致(特別是使用者修改了自己電腦的系統時間),那快取時間可能就沒啥意義了。在http1.1版開始,使用cache-control:max-age=秒替代】

cache-control

no-cache

響應告訴瀏覽器忽略資源的快取副本,強制每次請求直接傳送給伺服器,拉取資源,但不是「不快取」

no-store

響應強制快取在任何情況下都不要保留任何副本

max-age=[秒]

響應指明快取副本的有效時長,從請求時間開始到過期時間之間的秒數

public

響應任何路徑的快取者(本地快取、**伺服器),可以無條件的快取改資源

private

響應只針對單個使用者或者實體(不同使用者、視窗)快取資源

last-modified

mon,15aug201603:56:47gmt

響應告訴瀏覽器這個資源最後的修改時間。伺服器將資源傳遞給客戶端時,會將資源最後更改的時間以「last-modified:gmt」的形式加在實體首部上一起返回給客戶端【只能精確到秒級,如果某些檔案在1秒鐘以內,被修改多次的話,它將不能準確標註檔案的修改時間】

if-modified-since

mon,15aug201603:56:47gmt

請求其值為上次響應頭的last-modified值,再次向web伺服器請求時帶上頭if-modified-since。web伺服器收到請求後發現有頭if-modified-since則與被請求資源的最後修改時間進行比對。若最後修改時間較新,說明資源又被改動過,則響應整片資源內容(寫在響應訊息包體內),包括更新last-modified的值,http200;若最後修改時間較舊,說明資源無新修改,則響應http304(無需包體,節省瀏覽),告知瀏覽器繼續使用所儲存的cache

校驗值

etag

"fd56273325a2114818df4f29a628226d"

響應告訴瀏覽器當前資源在伺服器的唯一識別符號(生成規則又伺服器決定)

if-none-match

"fd56273325a2114818df4f29a628226d"

請求當資源過期時(使用cache-control標識的max-age),發現資源具有etage宣告,則再次向web伺服器請求時帶上頭if-none-match(etag的值)。web伺服器收到請求後發現有頭if-none-match則與被請求資源的相應校驗串進行比對,決定返回200或304

實際工作中我們完全可以時用上面這些引數的設定來組織/控制、更好的利用快取來為我們服務。

瀏覽器快取問題原理以及解決方案

減少網路頻寬消耗 降低伺服器壓力 減少網路延遲,加快頁面開啟速度 新鮮度 過期機制 也就是快取副本有效期。校驗值 驗證機制 資源的實體標籤etag entitytag 1 使用htmlmeta標籤web開發者可以在html頁面的節點中加入標籤,如下 事實上這種禁用快取的形式用處很有限 a.僅有ie才...

瀏覽器快取問題原理以及解決方案

減少網路頻寬消耗 降低伺服器壓力 減少網路延遲,加快頁面開啟速度 新鮮度 過期機制 也就是快取副本有效期。校驗值 驗證機制 資源的實體標籤etag entitytag 1 使用htmlmeta標籤web開發者可以在html頁面的節點中加入標籤,如下 事實上這種禁用快取的形式用處很有限 a.僅有ie才...

瀏覽器快取問題原理以及解決方案

瀏覽器快取問題 為什麼使用快取 1 減少網路頻寬消耗 2 降低伺服器壓力 3 減少網路延遲,加快頁面開啟速度 瀏覽器端的快取規則 新鮮度 過期機制 也就是快取副本有效期。校驗值 驗證機制 資源的實體標籤etag entitytag 解決方法 1 使用htmlmeta標籤 web開發者可以在html頁...