瀏覽器的 強制快取 協商快取

2022-10-05 09:42:08 字數 1478 閱讀 8393

強制快取

1、expires

http/1.0 中可以使用響應頭部字段 expires 來設定快取時間,它對應乙個未來的時間戳。客戶端第一次請求時,服務端會在響應頭部新增 expires 字段。當瀏覽器再次傳送請求時,先會對比當前時間和 expires 對應的時間,如果當前時間早於 expires 時間,那麼直接使用快取;反之,需要再次傳送請求。

服務端和瀏覽器的時間很可能不同,因此這個快取過期時間容易出現偏差。同樣的,客戶端也可以通過修改系統時間來繼續使用快取或提前讓快取失效。

2、cache-control

它的常用值有下面幾個:

no-cache,表示使用協商快取,即每次使用快取前必須向服務端確認快取資源是否更新;

no-store,禁止瀏覽器以及所有中間快取儲存響應內容;

public,公有快取,表示可以被**伺服器快取,可以被多個使用者共享;

private,私有快取,不能被**伺服器快取,不可以被多個使用者共享;

max-age,以秒為單位的數值,表示快取的有效時間;

must-revalidate,當快取過期時,需要去服務端校驗快取的有效性。

注:cache-control 的 max-age 優先順序高於 expires

3、但在 html5 規範中,並不支援這種方式,所以盡量不要使用 meta 標籤來設定快取.

協商快取

協商快取的更新策略是不再指定快取的有效時間了,而是瀏覽器直接傳送請求到服務端進行確認快取是否更新,如果請求響應返回的 http 狀態為 304,則表示快取仍然有效。控制快取的難題就是從瀏覽器端轉移到了服務端。

1、last-modified 和 if-modified-since

工作流程如下:

瀏覽器第一次請求資源,服務端在返回資源的響應頭中加入 last-modified 字段,該欄位表示這個資源在服務端上的最近修改時間;

當瀏覽器再次向服務端請求該資源時,請求頭部帶上之前服務端返回的修改時間,這個請求頭叫 if-modified-since;

服務端再次收到請求,根據請求頭 if-modified-since 的值,判斷相關資源是否有變化,如果沒有,則返回 304 not modified,並且不返回資源內容,瀏覽器使用資源快取值;否則正常返回資源內容,且更新 last-modified 響應頭內容。

2、 etag 和 if-none-match

具體工作流程如下:

瀏覽器第一次請求資源,服務端在返響應頭中加入 etag 字段,etag 字段值為該資源的雜湊值;

當瀏覽器再次跟服務端請求這個資源時,在請求頭上加上 if-none-match,值為之前響應頭部字段 etag 的值;

服務端再次收到請求,將請求頭 if-none-match 欄位的值和響應資源的雜湊值進行比對,如果兩個值相同,則說明資源沒有變化,返回 304 not modified;否則就正常返回資源內容,無論是否發生變化,都會將計算出的雜湊值放入響應頭部的 etag 欄位中。

瀏覽器快取 強制快取和協商快取

瀏覽器快取是瀏覽器在本地磁碟對使用者最近請求過的文件進行儲存,當訪問者再次訪問同一頁面時,瀏覽器就可以直接從本地磁碟載入文件 瀏覽器快取主要指http的快取 即協議層,協議層快取可以被分為強制快取和協商快取。兩種情況,一種是需要傳送http請求,一種是不需要傳送。協議中可以造成強制快取的字段有 ht...

瀏覽器強快取與協商快取

瀏覽器強快取與協商快取 當使用者在瀏覽器中輸入url後,瀏覽器首先會檢視快取中是否有相應資源,若有則需要判斷快取的資源是否過期,主要通過cache control和expires欄位來判斷,若沒有過期則直接使用該資源,該過程就是強快取 若資源過期了則再向伺服器發起請求,並在請求頭中帶上初次請求該資源...

瀏覽器的強快取與協商快取

之前一直對瀏覽器快取只能描述乙個大概,深層次的原理不能描述上來 終於在前端的兩次面試過程中被問倒下,為了洩恨,查閱一些資料最終對其有了乙個更深入的理解,廢話不多說,趕緊來看看瀏覽器快取的那些事吧,有不對的地方,請各位不吝賜教啊。本文主要講解瀏覽器端的快取,快取的作用是不言而喻的,能夠極大的改善網頁效...