瀏覽器的快取

2021-09-25 09:54:10 字數 1666 閱讀 4786

瀏覽器快取主要是指http請求的快取,作用是不言而喻的,能夠減少資源請求,極大的改善網頁效能,提高使用者體驗。瀏覽器第一次獲取到資源後,然後根據返回的資訊來告訴如何快取資源,可能採用的是強快取,也可能告訴客戶端瀏覽器是協商快取,這都需要根據響應的header內容來決定的。

審查network裡面的資源請求結果

[外鏈轉存失敗(img-hh2g1lpj-1563523691204)(/study/cache/network.png)]

對比分析

http狀態碼

size

說明分類

200from memory cache

不請求網路資源,資源快取在記憶體中,一般是等較小資源,瀏覽器關閉後,資料也將不存在

強快取200

from disk cache

不請求網路資源,資源快取在硬碟中,一般是js、css等較大資源

強快取200

資源大小

不快取304

資源大小

請求服務端發現資源沒更新,使用本地資源

協商快取

從上面分類很容易看出快取分為強快取和協商快取

沒有命中快取的情況

[外鏈轉存失敗(img-vg97lyny-1563523691207)(/study/cache/nocache.png)]

[外鏈轉存失敗(img-dvkpn8jk-1563523691208)(/study/cache/cache_control.png)]

強快取上面已經介紹了,直接從快取中獲取資源而不經過伺服器;與強快取相關的header欄位有兩個:

如果cache-control與expires同時存在的話,cache-control的優先順序高於expires

[外鏈轉存失敗(img-w3abezbw-1563523691210)(/study/cache/etag.png)]

協商快取是由伺服器來確定快取資源是否可用的,所以客戶端與伺服器端要通過某種標識來進行通訊,從而讓伺服器判斷請求資源是否可以快取訪問,這主要涉及到下面兩組header欄位,這兩組搭檔都是成對出現的,即第一次請求的響應頭帶上某個字段(last-modified或者etag),則後續請求則會帶上對應的請求字段(if-modified-since或者if-none-match),若響應頭沒有last-modified或者etag欄位,則請求頭也不會有對應的字段。

etag/if-none-match這兩個值是由伺服器生成的每個資源的唯一標識字串,只要資源有變化就這個值就會改變;其判斷過程與last-modified/if-modified-since類似,與last-modified不一樣的是,當伺服器返回304 not modified的響應時,由於etag重新生成過,response header中還會把這個etag返回,即使這個etag跟之前的沒有變化。

http1.1中etag的出現主要是為了解決幾個last-modified比較難解決的問題

用etag能夠更加準確的控制快取,因為etag是伺服器自動生成或者由開發者生成的對應資源在伺服器端的唯一識別符號。last-modified與etag是可以一起使用的,伺服器會優先驗證etag,一致的情況下,才會繼續比對last-modified,最後才決定是否返回304。

上面說到,使用強快取時,瀏覽器不會傳送請求到服務端,根據設定的快取時間瀏覽器一直從快取中獲取資源,在這期間若資源產生了變化,瀏覽器就在快取期內就一直得不到最新的資源,那麼如何防止這種事情發生呢?

快取 瀏覽器快取

瀏覽器快取 brower caching 是瀏覽器在本地磁碟對使用者最近請求過的文件進行儲存,當訪問者再次訪問同一頁面時,瀏覽器就可以直接從本地磁碟載入文件 1 瀏覽器第一次請求時,會發出一組 http 頭,用來指導瀏覽器如何進行快取。伺服器規定乙個資源是否要進行快取,主要由響應頭中的expires...

瀏覽器快取

1.為什麼使用瀏覽器快取 以前了解的動態指令碼加速,或者動態內容快取之類,他們的原理都是避免伺服器重複計算,結果仍保留在伺服器端,這樣獲取資料還得從伺服器檢索然後傳送到使用者瀏覽器,如果我們把這些結果放在瀏覽器中,就省去了伺服器的查詢和網路傳輸,瀏覽器快取很好的實現了這個功能 2.瀏覽器快取存放在哪...

瀏覽器快取

瀏覽器快取知識歸納 瀏覽器快取是提公升網頁效能的一大利器,但是,也是一把雙刃劍。利用的好網頁的效能會有大幅度提公升,伺服器的壓力也會減小。利用的不好,也會遇到很多的問題。本文結合瀏覽器快取的知識,結合真實案例進行分析,希望對讀者有所幫助。瀏覽器快取分類 瀏覽器快取分為強快取和協商快取,瀏覽器載入乙個...