一文讀懂前端快取

2022-02-14 13:50:48 字數 2431 閱讀 9036

按快取位置分類 (memory cache, disk cache, service worker 等)

按失效策略分類 (cache-control, etag 等)

幫助理解原理的一些案例

快取的應用模式

service worker

memory cache

disk cache

網路請求

根據 service worker 中的 handler 決定是否存入 cache storage (額外的快取位置)。

根據 http 頭部的相關字段(cache-control, pragma 等)決定是否存入 disk cache

memory cache 儲存乙份資源 的引用,以備下次使用。

expires: thu, 10 nov 2017 08:45:11 gmt

由於是絕對時間,使用者可能會將客戶端本地的時間進行修改,而導致瀏覽器判斷快取失效,重新請求該資源。此外,即使不考慮自信修改,時差或者誤差等因素也可能造成客戶端與服務端的時間不一致,致使快取失效。

寫法太複雜了。表示時間的字串多個空格,少個字母,都會導致非法屬性從而設定失效。

cache-control: max-age=2592000

max-age:即最大有效時間,在上面的例子中我們可以看到

must-revalidate:如果超過了 max-age 的時間,瀏覽器必須向伺服器傳送請求,驗證資源是否還有效。

no-cache:雖然字面意思是「不要快取」,但實際上還是要求客戶端快取內容的,只是是否使用這個內容由後續的對比來決定。

no-store: 真正意義上的「不要快取」。所有內容都不走快取,包括強制和對比。

public:所有的內容都可以被快取 (包括客戶端和**伺服器, 如 cdn)

private:所有的內容只有客戶端才可以快取,**伺服器不能快取。預設值。

在響應體體積上的節省是它的優化點。它的優化覆蓋了文章開頭提到過的請求資料的三個步驟中的最後乙個:「響應」。通過減少響應體體積,來縮短網路傳輸時間。所以和強制快取相比提公升幅度較小,但總比沒有快取好。

last-modified: mon, 10 nov 2018 09:10:11 gmt

如果資源更新的速度是秒以下單位,那麼該快取是不能被使用的,因為它的時間單位最低是秒。

如果檔案是通過伺服器動態生成的,那麼該方法的更新時間永遠是生成的時間,儘管檔案可能沒有變化,所以起不到快取的作用。

檢視 memory cache

檢視 disk cache。這裡又細分:

如果有強制快取且未失效,則使用強制快取,不請求伺服器。這時的狀態碼全部是 200

如果有強制快取但已失效,使用對比快取,比較後確定 304 還是 200

傳送網路請求,等待網路響應

把響應內容存入 disk cache (如果 http 頭資訊配置可以存的話)

把響應內容 的引用 存入 memory cache (無視 http 頭資訊的配置)

把響應內容存入 service worker 的 cache storage (如果 service worker 的指令碼呼叫了 cache.put())

每種資源都(同步)請求兩次

增加指令碼非同步請求

)})// 這個也叫做 networkonly 的快取策略。

self.addeventlistener('fetch', e => )

普通重新整理 (f5):因為 tab 並沒有關閉,因此 memory cache 是可用的,會被優先使用(如果匹配的話)。其次才是 disk cache。

cache-control: max-age=31536000

cache-control: no-cache
cache-control: max-age=600, must-revalidate
(但這篇文章把 service worker 的優先順序排在 memory cache 和 disk cache 之間,跟我實驗效果並不相符。懷疑可能是 2 年來 chrome 策略的修改?)

一文讀懂Nginx

問 nginx的負載均衡演算法有什麼?預設是什麼演算法?答 1 輪詢 按請求的時間輪詢查空閒的後端伺服器 2 指定輪詢機率 機率的原因是後端伺服器的效能不均勻,好的多分點,差的少分點 3 固定ip繫結固定伺服器 預設是加權輪詢,就是優先訪問權重高的伺服器 問 nginx是單執行緒的嗎?答 是單執行緒...

一文讀懂SpringMVC

主要講的是dispatcherservlet這個類 ioc其實是乙個map,工程啟動後掃瞄路徑,根據類的全限定名建立bean 問 怎麼根據路徑找到方法?map還存key為 aaa value為該controller例項 問 autowired原理?自定義註解,在載入的時候,掃瞄controller層...

堆疊 一文讀懂

堆疊 stack 是一種先進後出的 操作受限的線性表,也可以直接稱為棧。可以把棧想象成乙個桶一樣,往這個桶裡面一層一層的放東西,先放進去的在裡面,後放進去的東西依次在外面。但取東西的時候就是先取靠近外面的,再依次一層層取裡面的。這就是 後進先出 last in first out 的原則。因此 棧 ...