瀏覽器快取機制介紹之http快取強快取協商快取

快取的基本策略是拿空間換時間.意思就是我們將資料儲存起來,犧牲空間,在下次使用的時候直接拿儲存的,減少請求時間.

瀏覽器快取機制有四個方面，它們按照獲取資源時請求的優先順序依次排列如下：

快取是伺服器端來設定的,前端無法設定!

頁面通過http獲取資源,如果每次資源都通過http去獲取,無疑是很消耗效能的,使用者的體驗並不好.所以我們在完成一次http通訊後,可以將部分資源快取起來,等到再次使用的時候,直接從快取中拿,不需要在從伺服器中獲取了,大大提高了效能.

http快取有2種:強快取和協商快取

請求發出時,瀏覽器回去判斷是否命中expires和cache-control兩個欄位中設定的強快取,如果命中,那麼會直接從快取中拿取資源,不會與伺服器發生通訊

expires

express是http1.0中關於強快取的設定項,值是快取過期時間.如下圖是在network中擷取的強快取樣子.

在第一次請求完畢後,當再次請求時,瀏覽器就會先對比本地時間和 expires 的時間戳，如果本地時間小於 expires 設定的過期時間，那麼就直接去快取中取這個資源。

expires設定強快取對本地時間的依賴導致快取在某些情況下會出現bug

cache-control是http1.1中關於快取的設定項,值有no-cache、no-store、public、private、max-age

相比於expires,cache-control可以用max-age更精準的設定強快取的過期時間,因為max-age的值是秒,表示在上一次請求後的多少秒內,強制快取生效.解決了expires時間戳帶來的bug

cache-control可以看作是expires的完全替代方案,在請求中國呢expires存在的唯一作用就是為了相容http1.0.

cache-control的優先順序也比expires高,當同時存在時,我們以cache-control為標準

response headers中max-age的樣式

cache-control: max-age=360000

cache-control其他設定項的功能:

no-cache:繞開瀏覽器換取,請求去詢問伺服器快取是否更新,走協商快取的路線

public:資源可以被所有的使用者快取，包括終端使用者和cdn等中間**伺服器

private:資源只能被當前客戶端快取,不能被**伺服器快取

private是我們預設的設定,但是通常如果我們設定了max-age就會自動開啟public模式

協商快取是每次請求時,都回去伺服器詢問資源是否更新,如果資源沒有更新,會返回304狀態碼讓瀏覽器讀取本地快取;如果伺服器資源更新了就會返回更新後的資源

判斷再次請求時服務端資源是否更新是協商快取的重點,這涉及到幾個字段:etag搭配if-none-match、last-modified搭配if-modified-since

last-modified搭配if-modified-since

last-modified值是第一次請求發生時的時間戳,它會隨著響應頭返回,再次請求的時候請求頭會攜帶上if-modified-since,該字段的值是上一次請求的last-modified的值.目的是讓伺服器知道上一次請求的時間,對比該資源在伺服器上最後一次修改的時間,判斷在這段時間內資源是否發生了改變

last-modified: fri, 27 oct 2017 06:35:57 gmt

if-modified-since: fri, 27 oct 2017 06:35:57 gmt

使用last-modified有一些缺點:

為了解決這些缺點etag應運而生.

etag搭配if-none-match

etag的演算法和資源內容有關.服務端會根據資源的內容生成乙個唯一的etage.當我們修改資源時,資源內容改變會重新生成etag.

當我們請求一次資源後,瀏覽器會通過響應頭返回乙個etag值.再次請求資源時,http的請求頭會攜帶乙個if-none-match欄位,該字段的值就是etag的值.目的是為了給伺服器做對比

為什麼要有etag?

以上就是http快取的全部內容了,使用強快取還是協商快取依據情況而定.

瀏覽器快取機制介紹之http快取強快取協商快取

HTTP瀏覽器快取機制

瀏覽器HTTP快取機制

瀏覽器快取機制 http快取頭

瀏覽器快取機制介紹之http快取 強快取 協商快取

HTTP瀏覽器快取機制

瀏覽器HTTP快取機制

瀏覽器快取機制 http快取頭

相關推薦

瀏覽器快取機制介紹之http快取強快取協商快取