瀏覽器快取機制

2021-10-24 23:11:58 字數 3071 閱讀 6835

瀏覽器快取(browser caching)是為了節約網路的資源加速瀏覽,瀏覽器在使用者磁碟上對最近請求過的文件進行儲存,當訪問者再次請求這個頁面時,瀏覽器就可以從本地磁碟顯示文件,這樣就可以加速頁面的閱覽。

瀏覽器快取主要有兩類:強快取:cache-control;expires 和快取協商:last-modified、if-modified-since;etag、if-none-match。

瀏覽器啟用快取至少有兩點顯而易見的好處:(1)減少頁面載入時間;(2)減少伺服器負載;瀏覽器是否使用快取、快取多久,是由伺服器控制的。準確來說,當瀏覽器請求乙個網頁(或者其他資源)時,伺服器發回的響應的「響應頭」部分的某些字段指明了有關快取的關鍵資訊。下面看下,http報文中與快取相關的首部字段:

根據上面四種型別的首部字段不同使用策略,瀏覽器中快取可分為強快取和協商快取

強快取:expires(http 1.0)

expires是http 1.0提出的乙個表示資源過期時間的header,它描述的是乙個絕對時間,由伺服器返回,用gmt格式的字串表示

缺點:expires時間是相對伺服器而言,無法保證和客戶端時間統一。

強快取:cache-control(http 1.1)

針對上述 expires 的問題,http1.1新增了 cache-control 來定義快取過期時間,這是乙個相對時間,在配置快取的時候,以為單位,用數值表示,如:cache-control:max-age=315360000

max-age(單位為s)指定設定快取最大的有效時間,定義的是時間長短。當瀏覽器向伺服器傳送請求後,在max-age這段時間裡瀏覽器就不會再向伺服器傳送請求了。

public 指定響應會被快取,並且在多使用者間共享。也就是下圖的意思。如果沒有指定public還是private,則預設為public。

private 響應只作為私有的快取(見下圖),不能在使用者間共享。如果要求http認證,響應會自動設定為private。

no-cache 指定不快取響應,表明資源不進行快取

但是設定了no-cache之後並不代表瀏覽器不快取,而是在快取前要向伺服器確認資源是否被更改。因此有的時候只設定no-cache防止快取還是不夠保險,還可以加上private指令,將過期時間設為過去的時間(private, max-age=0, no-cache)。

no-store 絕對禁止快取,如果用了這個命令不會進行快取,每次請求資源都要從伺服器重新獲取。

協商快取:last-modified、if-modified-since

當瀏覽器對某個資源的請求沒有命中強快取,就會發乙個請求到伺服器,驗證協商快取是否命中,如果協商快取命中,請求響應返回的http狀態為304(not modified)。

last-modified缺陷

你可能會覺得使用last-modified已經足以讓瀏覽器知道本地的快取副本是否足夠新,為什麼還需要etag(實體標識)呢?http1.1中etag的出現主要是為了解決幾個last-modified比較難解決的問題:

last-modified標註的最後修改只能精確到秒級,如果某些檔案在1秒鐘以內,被修改多次的話,它將不能準確標註檔案的修改時間

如果某些檔案會被定期生成,當有時內容並沒有任何變化,但last-modified卻改變了,導致檔案沒法使用快取

有可能存在伺服器沒有準確獲取檔案修改時間,或者與**伺服器時間不一致等情形。etag是伺服器自動生成或者由開發者生成的對應資源在伺服器端的唯一識別符號,能夠更加準確的控制快取。

協商快取:etag、if-none-match (http 1.1)

為了解決上述last-modified可能存在的不準確的問題,http 1.1 還推出了 etag 實體首部字段。

不同點:強快取不發請求到伺服器,協商快取會發請求到伺服器。

共同點:如果命中,都是從客戶端快取中載入資源,而不是從伺服器載入資源資料;

cache-control: no-cache, no-store, must-revalidate
大廠多使用負載均衡的方式來排程 http 請求。因此,同乙個客戶端對同乙個頁面的多次請求很可能會被分配到不同的伺服器來響應,而根據 etag 的計算原理,不同的伺服器有可能在資源內容沒有變化的情況下,計算出不一樣的 etag,而使快取失效。

因為css檔案載入一次就可渲染出來,我們不會頻繁讀取它,所以它不適合快取到記憶體中,但是js之類的指令碼卻隨時可能會執行,如果指令碼在磁碟當中,我們在執行指令碼的時候需要從磁碟取到記憶體中來,這樣io開銷就很大了,有可能導致瀏覽器失去響應。

**快取原理 (訪問快取優先順序)

先在記憶體中查詢,如果有,直接載入。

如果記憶體中不存在,則在硬碟中查詢,如果有直接載入。

如果硬碟中也沒有,那麼就進行網路請求。

請求獲取的資源快取到硬碟和記憶體。

前端優化:瀏覽器快取技術介紹

一文讀懂前端快取

瀏覽器快取機制

最近在準備優化日誌請求時遇到了一些令人疑惑的問題,比如為什麼響應頭里出現了兩個 cache control 為什麼明明設定了 no cache 卻還是發請求,為什麼多次訪問時有時請求裡帶了 etag,有時又沒有帶?等等。後來查了一些資料以及同事親自驗證,總算對這些問題有了個清晰的理解,現在整理出來以...

瀏覽器快取機制

當我們瀏覽乙個頁面發現有異常時,通常考慮的就是書不是瀏覽器做了快取呢,按ctrl f5重新請求一次就能請求到沒有快取的頁面,這個是為什麼呢。首先,ctrl f5組合鍵重新整理頁面,那麼瀏覽器會直接向目標url傳送請求,而不再使用瀏覽器快取的資料。其次,當請求到達伺服器端依然有可能出現使用伺服器端的資...

瀏覽器快取機制

瀏覽器快取機制 瀏覽器快取機制,其實主要就是 協議定義的快取機制 如 expires cache control 等 但是也有非 協議定義的快取機制,如使用 html meta 標籤,web 開發者可以在 html 頁面的節點中加入 標籤,如下 上述 的作用是告訴瀏覽器當前頁面不被快取,每次訪問都需...