快取頭 Cache Control 的含義和使用

2021-09-23 23:37:48 字數 2565 閱讀 4014

本篇我們來寫一下http 中的快取,即cache-control 。

cache-control 的可快取性(指明哪些地方可以快取返回的資料):

- public (http 返回的時候在heaher 中設定cache-control 的值為『public』。它代表,這個http 請求它返回的內容所經過的任何路徑中,包括中間的一些http **伺服器以及發出請求的客戶端瀏覽器,都可以進行對返回內容的快取操作)

- private (發起請求的瀏覽器才能使用返回資料的快取)

- no-cache (可以在本地或者proxy伺服器進行快取,每次發起請求都要去伺服器驗證,伺服器返回可以使用快取,才可以真正使用本地快取,任何節點都不能直接使用快取)

到期(快取的有效期)

max-age=(最常用)

s-maxage=(只有在**伺服器才會生效,且**伺服器會優先使用s-maxage)

max-stale=(它是發起請求方,主動去帶著的header;在max-age過期後,但還在max-stale的有效期內,還可以使用過期的快取,不需要去原伺服器請求新的內容)

重新驗證(不常用)

must-revalidate (它的意思是:當我們設定了 max-age ,過期後,我們必須去原服務端傳送請求,重新獲取資料,驗證是否快取過期,而不能直接去使用本地的快取)

proxy-revalidate (與must-revalidate 相似,proxy-revalidate 是用在快取伺服器中,如果快取伺服器中的資料過期的話,需要去原伺服器傳送請求...)

其他

no-store (瀏覽器或者proxy伺服器都不能存返回資料的快取,永遠都需要去伺服器請求新的資料)

no-transform (主要用在proxy伺服器,表示不要去隨意改動返回的內容,比如壓縮什麼的)

下面我們來試一試max-age,如下。

先是 server.js ** 

然後test.html **如下

hello world

don't speak

然後,啟動服務。在瀏覽器輸入url localhost:8888 就可以訪問,如下。

有了上面的基礎後,我們給/script.js 請求新增max-age 為20s 如下。

下面,我們重啟服務後,重新整理頁面,第二次重新整理(間隔小於20s)時,會發現/script.js 是從快取中讀的。如下。

但是,有乙個問題 catch-control 是客戶端快取,當max-age 之內,服務端更新了資料,客戶端是不能知道的。

這個問題,前端的一種常用的解決方案是,將打包的js檔名加入一段雜湊碼,當打包內容不變時,雜湊碼就不變。這樣子,當內容不變時,請求的url 也就不變,當內容變了請求的url 也變了。這樣就達到了更新快取的目的。

最後,catch-control 有很多值,之間使用逗號分割即可,如下。

done.

快取頭Cache Control 的含義和使用

1 public 表示任何地方 都可以進行快取 2 private 表示 只允許 發起 請求 的瀏覽器 才可以 進行 快取 3 no cache 任何 地方 都不允許 快取 可以進行快取,但是每次都需要向伺服器請求驗證 快取是否可用 4 max age 單位s 秒 表示 快取 過多久 時間 到期 5...

快取頭Cache Control的含義和使用

可快取性 public http經過的任何地方都可以快取 private 發起請求的瀏覽器才可以進行快取 no cache 任何節點都不可以快取 本地可以存快取,但需要伺服器驗證過以後到期 max age 瀏覽器端讀取 s maxage 伺服器端讀取,會覆蓋max age max stale 只有在...

Cache control(網頁快取)

網頁的快取是由http訊息頭中的 cache control 來控制的,常見的取值有private no cache max age must revalidate等,預設為private。其作用根據不同的重新瀏覽方式分為以下幾種情況 1 開啟新視窗 如果指定cache control的值為priv...