初探Http快取?

嘻嘻xixi發表於2019-04-15
HTTP快取

作用

瀏覽器（和代理）利用快取減少http數量或者是減少相應檔案大小，增加頁面載入速度。

快取方法

expires header

瀏覽器會將過期時間和相應的url快取起來，請求同一個資源時檢視是否過期，沒有過期就直接從快取裡取出，不用傳送請求了。過期之後的策略請看最下面的快取有效性確認

res.setHeader(“Expires”, new Date(Date.now() + 2592000000).toUTCString());
複製程式碼

優點： 沒有額外請求 200 OK (from memory cache)

缺點：

  1. 因為是一個具體時間，需要服務端和客服端的時間一致
  2. 需要監測這個資源，當時間點到了的時候要更新過期時間

Cache-Control Max-Age

使用了偏移時間，應該是把資源建立時間和資源以及偏移時間一起存到快取裡了。每次訪問資源的時候，檢視資源建立的時間並且加上偏移時間和現在時間進行比較。和Expires一樣都是不傳送請求了。 在自己的電腦上簡單測了下，500KB的也可以快取。 同時有Expires 和 Cache-Control 的話後者會覆蓋前者

res.setHeader("Cache-Control", "public, max-age=2592000");
複製程式碼

server cache-control

上面的是server端的

client cache-control

瀏覽器會將html檔案的請求頭裡帶上Cache-Control:max-age=0 表示即使有快取，也會重新訪問下伺服器驗證下。server可以根據改變日期(參考最下面的快取有效性確認)可以返回304,這樣瀏覽器就直接用快取了。

優點： 和Expires 一樣

缺點： http1.1引入，儘管很少量的瀏覽器仍然使用1.0。 有些外掛可以幫助你設定，一種寫法同時寫Expires 和Cache-Control

快取有效性確認

過期了會做個一個conditional get request(條件GET請求）。如果過期了，會進行有效性檢驗，如果返回304 則直接拿快取裡的，否則請求新的返回200響應。 有兩種方法可以檢視快取的有效性

比較最新修改日期

server: Last-Modified client: If-Modified-Since 瀏覽器將伺服器返回的 Last-Modified 的時間和對應資源存入快取，再請求的時候將這個時間寫入請求頭的 If-Modified-Since 傳送給伺服器，伺服器判斷是否過期，過期則返回200需要重新下載；否則就返回304，無需返回資源所有內容。

ETag (Entity Tags) 實體標籤

類似指紋，可以理解為資源發生變化時，它一定會發生變化。 server: ETag client: If-None-Match 缺點：做伺服器叢集時，向不同伺服器請求的資源時同一個資源時，可能返回的ETag反而不同，沒法充分利用快取，浪費頻寬。《高效能網站建設指南》是不建議使用 Etag 或者要特殊配置 ETag 推薦使用 Last-Modified

參考

  1. http - What’s the difference between Cache-Control: max-age=0 and no-cache? - Stack Overflow

  2. 《高效能網站建設指南》

  3. developer.mozilla.org/en-US/docs/…

相關文章