前端快取機制的總結

2021-07-31 11:10:46 字數 2236 閱讀 3601

快取就相當於是對資源的一種副本實現,不管是在客戶端還是在服務端儲存著,用相同的url進行請求,直接從副本中請求資源而不再訪問源伺服器。快取種類很多,像是瀏覽器快取,cdn快取等都是我們比較熟悉的,當然還有**伺服器快取,閘道器快取等,這裡我主要介紹一下前兩種。乙個頁面的快取狀態可以通過這兩種方法去設定,meta標籤和http header。

meta標籤常見以下幾種用法

pragma與no-cache用於定義頁面快取

常見的取值有private、no-cache、max-age、must-revalidate等,預設為private

指定expires值為乙個早已過去的時間,那麼訪問此網時若重複在位址列按回車,那麼每次都會重複訪問

設定header

一般是設定這幾個header:

處理流程一般如下:

expires = 時間,http 1.0 版本,快取的載止時間,允許客戶端在這個時間之前不去檢查(發請求),expires 的乙個缺點就是,返回的到期時間是伺服器端的時間,這樣存在乙個問題,如果客戶端的時間與伺服器的時間相差很大,那麼誤差就很大,所以在http 1.1版開始,使用cache-control: max-age=秒替代。

last-modified:

表明資源最後更新的時間,響應格式一般為:

last-modified

:mon, 21 nov 2016 03:25

:47gmt

當第一次請求資源時,源伺服器響應後返回last-modified值和響應內容,客戶端會將響應內容和last-modified一起快取在本地,第二次請求時會將請求體連同if-modified-since(等於last-modified的值)一起傳送給服務端,服務端會根據if-modified-since判定資源是否改變,如果沒有改變會響應304返回乙個空的響應體,如果資源改變返回新的內容。

etags:

根據實體內容生成一段hash字串,標識資源的狀態,由服務端產生,資源改變這個值就會改變個人感覺類似於資源的一種抽象對映。請求過程類似於last-modified,不過它作為if-none-match(服務端響應的etags)傳送給服務端判斷這個值是否與服務端的etags一致看資源是否改變。

last-modified和etags的處理流程如下:

cdn(content delivery network),即就是內容分發網路,就相當於是在客戶端和服務端之間加乙個cdn層,使用者在瀏覽**的時候,cdn會選擇乙個離使用者最近的cdn邊緣節點來響應使用者的請求,這不但加快了使用者體驗速度也減輕了源伺服器的負載。

工作原理:使用者通過輸入網域名稱來訪問頁面,首先進行dns處理,dns解析伺服器會將使用者訪問請求定位到離使用者最近、負載最輕的cdn快取伺服器上,返回該cdn節點的ip位址,快取伺服器拿到資料後,一方面將資料返回瀏覽器,另一方面進行本地儲存,之後再次訪問,資料將從cdn快取伺服器中被返回。

html5 引入了應用程式快取,這意味著 web 應用可進行快取,並可在沒有網際網路連線時進行訪問。

應用程式快取為應用帶來三個優勢:

設定:

"en" manifest="demo.manifest">

...

addtype text/cache

-manifest

離線儲存的原理就是請求的資源會像cookie一樣被儲存了下來,之後當網路在處於離線狀態下時,瀏覽器會通過被離線儲存的資料進行頁面展示。

感覺常見的區別就這兩個吧,它們的操作也很簡單,web storage擁有像getitem,setitem,clear等方法,不像cookie儲存還得自己去封裝乙個,比較方便。

前端幾種本地快取機制

在漫長的前端開發過程中,我們常用的幾種本地快取機制 cookie localstorge,sessionstorge 1.cookie的特點 cookie的內容主要包括 名字,值,過期時間,路徑和域。路徑與域一起構成cookie的作用範圍。若不設定過期時間,則表示這個cookie的生命期為瀏覽器會話...

前端快取總結 HTTP快取

在前端面試中,可能或多或少都會被提及快取問題,而這個問題大多數都是作為業務中不得不考慮的乙個效能優化點,如果平時沒有怎麼關注或是特意去了解這塊的童鞋們,可能就是不太了解其中的原由,那麼今天我們就這個快取問題來細細分析,幫助一些還不是太明白的或是剛入門的前端童鞋們梳理梳理,理解理解,那就話不多說,開始...

前端快取 瀏覽器快取機制

瀏覽器第一次向伺服器發起該請求後拿到請求結果後,將請求結果和快取標識存入瀏覽器快取,瀏覽器對於快取的處理是根據第一次請求資源時返回的響應頭來確定的。瀏覽器中的快取作用分為兩種情況,一種是需要傳送http請求,一種是不需要傳送。expires 即過期時間 expires max age 請求時間 存在...