前端常用的快取技術

haqiu發表於2019-04-19
前端快取

CDN快取

CDN（Content DeliveryNetwork），即內容分發網路。CDN是構建在網路之上的內容分發網路，依靠部署在各地的邊緣伺服器，通過中心平臺的負載均衡、內容分發、排程等功能模組，使使用者就近獲取所需內容，降低網路擁塞，提高使用者訪問響應速度和命中率

具體是什麼意思呢？ 當我們使用CDN時，CDN會優先排程離我們最近的邊緣伺服器並檢測是否有該請求的快取資料，如果有則返回快取資料；如果沒有則向中心伺服器請求並返回。

優點：

  1. 減少頻寬的佔用，減輕網路擁堵，提高訪問速度
  2. 減輕本地伺服器負擔

DNS快取

DNS（Domin Name System）是域名和IP相互對映的分散式資料庫，可將域名解析成供計算機識別的IP地址

DNS查詢耗時大約20ms，在DNS查詢過程中，瀏覽器不進行任何活動，會導致瀏覽器出現空白頁；如果DNS查詢很多，會導致網頁載入效能受到影響

DNS快取機制： 當首次訪問一個域名，通過DNS解析獲取其IP，並將域名及對應的IP快取下來，當下次訪問該域名時，則不再進行DNS查詢，直接使用快取下來的IP

快取時間： 不同的瀏覽器DNS快取時間也不同，IE預設的DNS快取時間為30min，Firfox、Chrome預設的DNS快取時間為1min

若域名對應的ip已更改，則需要清除DNS快取（ipconfig/flushdns）

HTTP快取

當客戶端第一次完成資料請求後，瀏覽器會快取本次請求的資料，當下次執行相同請求，則直接在快取資料庫中返回；但HTTP快取有多種規則，根據是否向伺服器傳送請求分為 “強制快取” 和 “對比快取” 兩種

強制快取

當客戶端傳送請求時，若瀏覽器中有該請求的快取資料，則直接返回快取資料；

若瀏覽器中未有本次請求的快取資料或快取資料過期，則本次請求會抵達伺服器去請求資料；

前端常用的快取技術

那麼如何去判斷快取資料是否已經失效（過期）呢？

當客戶端與伺服器完成一次請求後，伺服器會在Response Headers 報文中返回快取規則資訊；在Response Body報文中返回響應的資料；快取規則有 Expires 和 Cache-Control 兩種

Expires

Expires表示快取資料的到期時間，若下次請求的日期小於到期時間，則直接從快取資料中讀取；若大於到期時間，則直接請求伺服器

  • 由於到期時間是有伺服器端生成的，這與客戶端的時間會有偏差，所以從HTTP 1.1 版本後此方案由 Cache-Control 代替

前端常用的快取技術

Cache-Control

目前HTTP標準的快取規則，包含“private”、“public”，“max-age=”、“no-cache”、“no-store”

  • private：客戶端可以快取
  • public：客戶端和服務端都可以快取
  • max-age=xxx：快取的總時長，單位為秒
  • no-cache：使用對比快取驗證快取資料
  • no-store：不適用強制快取和對比快取

前端常用的快取技術
此例子中，快取時間為3153600秒（1年），在1年內請求這條資料，都只會從快取中返回

對比快取

瀏覽器完成一次完整請求後，伺服器返回資料和快取規則，客戶端收到並快取在快取資料庫中；

對比快取顧名思義就是每次請求，客戶端都會拿快取標識去伺服器判斷該快取是否可用，若可用，伺服器返回304並通知客戶端從快取中讀取，若不可用則伺服器返回200和最新的資料和快取規則

前端常用的快取技術

快取標識分為以下兩種

Last-Modified / If-Modified-Since

前端常用的快取技術
伺服器返回資源最後一次修改的時間

前端常用的快取技術
再次請求時，客戶端在請求頭攜帶If-Modified-Since；伺服器拿If-Modified-Since與資源最後修改時間做對比，若大於或等於，則命中對比快取，返回304，從快取中讀取；反之，則伺服器返回最新的資料和快取規則，並返回200

Etag / If-None-Match（優先順序高於Last-Modified / If-Modified-Since）

前端常用的快取技術
第一次請求，瀏覽器返回資源唯一標識(一般都是hash生成的)

前端常用的快取技術

伺服器儲存著檔案的Etag欄位，可以在與每次客戶端傳送If-no-match的欄位進行比較。如果相等，則表示未修改，響應304；反之，則表示已修改，響應200狀態碼，返回資料。

Service Worker 離線快取

相關文章