愛你的快取 ❤️

使用者第二次載入您的網站時，會使用 HTTP 快取，因此請確認 但事實上

Sam Thorogood

此貼文是「愛你的快取」影片，合稱為 Extended 部分的內容 2020 年 Chrome 開發人員高峰會內容。請務必觀看下列影片：

使用者第二次載入您的網站時，瀏覽器會使用內部的資源 HTTP 快取將能加快載入速度不過，針對伺服器內部的快取標準 它可追溯至 1999 年，但定義相當廣泛 不論檔案是否可從網路再次擷取 (例如 CSS 或圖片) 事實上，從快取載入到快取資料 其實有點不明確

在這篇文章中，我會介紹一個合理的現代快取預設值， 實際上「完全沒有快取」這是預設設定 當然，這不只是「把它關掉」以外，快繼續往下閱讀吧！

目標

網站首次載入時，您有兩個目標：

  1. 請確保使用者取得的是最新版本 所做的修改應該很快就會生效
  2. #1 在盡量不從網路擷取時進行

原則上，我們只需要傳送最小幅度的修改給客戶。 再次載入您的網站時調整網站架構，確保 任何變更都有效分散 (稍後會更難有效分配) 影片)。

話雖如此，您在考慮使用快取時 您決定讓使用者的瀏覽器 HTTP 快取 長期保留在您的網站上 這樣就完全不需要網路請求了或是 建構了一個服務工作處理程序，將服務網站完全離線， 請檢查是否符合最新資訊這是非常重要的選項，而且是有效且 ，但網路不一定需要 在極度快取時使用，或甚至完全只使用網路。

背景

身為網頁程式開發人員，我們都很習慣擁有「快取過時」的概念。 但我們都知道，市面上有許多工具來解決這類問題，那就是 重新整理」，或是開啟無痕式視窗，或同時使用瀏覽器的 可用於清除網站資料的開發人員工具

網路上的一般使用者沒有如此奢華，雖然我們 有一些核心目標 是確保使用者在第 2 步 以及確保不會出現錯誤時間 因而停滯不前(如果想聽聽看我們的建議？請觀看這部影片 幾乎導致 web.dev/live 網站卡住了！)

在背景略做調整，這是「快取過時」的常見原因其實是 1999 年的快取預設值需要使用 Last-Modified 標頭：

這張圖表顯示使用者瀏覽器快取不同素材資源的時間長度
系統會快取不同時間產生的素材資源 (以灰色顯示)， 因此第 2 次載入可結合快取和最新素材資源

您載入的每個檔案都會在目前生命週期內保留 10%， 您的瀏覽器就能看到該資訊舉例來說，如果 index.html 是在一個月前建立， 快取會保留大約三天的時間

回顧這一天是出於意志願景的計畫，但考量到 這項預設行為代表現今網站 則是指使用者擁有專為不同版本設計的檔案 擷取到你的網站 (例如週二發布的 JS 和週五的 CSS 版本)，因為這些檔案沒有同時更新。

光線充足的路徑

目前系統完全不需快取任何快取資料， CDN 可讓您將內容關閉 讓使用者享有低延遲和高可用性每次使用者載入您的網站時，就會前往網路 確認資料是否為最新版本這個要求的延遲時間較短 提供的解決方案。

您可以設定網站主機使用這個標頭回應網路要求：

Cache-Control: max-age=0,must-revalidate,public

基本上：檔案隨時都有效，你必須完成驗證 才能再次使用 (反之 「建議」)。

以傳輸的位元組數來看，這項驗證程序相對便宜 大型圖片檔尚未變更，您的瀏覽器會收到小尺寸的 304 錯誤 但由於使用者仍須前往網路尋找，因此會產生延遲的費用 。這是這個方法的主要缺點。成效非常好 最快連線速度的使用者，選用 CDN 但很多人使用行動裝置速度較慢的人 連線或使用不善的基礎架構

無論如何，這種新型做法 是熱門 CDN 預設 CDN 但幾乎在所有 CDN 都能設定如果是 Firebase 託管，您可以在 這個標題 專區 的依附元件清單：

"headers": [
  // Be sure to put this last, to not override other headers
  {
    "source": "**",
    "headers": [ {
      "key": "Cache-Control",
      "value": "max-age=0,must-revalidate,public"
    }
  }
]

因此，雖然我仍建議將這個選項設為合理預設值，但它只是這個預設位置！ 請繼續閱讀，瞭解如何升級預設設定。

加上指紋的網址

在素材資源、圖片等項目的名稱中加入檔案內容的雜湊值 可確保這些檔案隨時具有專屬性 內容—這會產生名為 sitecode.af12de.js 的檔案。時間 您的伺服器會回應這些檔案 使用者的瀏覽器 標題：

Cache-Control: max-age=31536000,immutable

這個值為年 (以秒為單位)。根據規格 等於「永久」

重要的是，請勿手動產生這些雜湊，因為這需要太多人工作業！個人中心 可以利用 Webpack、Rollup 等工具協助測試。請務必 進一步瞭解工具報表。

請記住，不僅 JavaScript 以外，還能受益於加上數位指紋採集的網址。 圖示、CSS 以及其他不可變動的資料檔案 。(請務必觀看上方影片，進一步瞭解程式碼 分割，這樣每當網站變更時，就可以減少傳送的程式碼)。

無論網站採用快取的方式為何，這類指紋 是任何您建立網站不可或缺的好幫手大部分網站 不會每次發布版本變更

當然，我們無法以下列方式重新命名「友善」且面向使用者的網頁：重新命名 將 index.html 檔案寫入 index.abcd12.html，這是不可行的 每次載入您的網站時，使用者都會前往新網址！這些「友善」網址 無法以這種方式重新命名和快取，這會導致我前往可能的中段

中間地面

在快取方面，中間有明顯的空間。我 呈現了兩個極端選項快取「永不」或「永遠」快取。另一個重點是 您會需要一段時間快取的多個檔案，例如 「友善」我剛才提到的網址

如果你想要快取這些「友善」的快取檔案網址和 HTML 程式碼 考量項目包含哪些依附元件、如何快取這些，以及如何 快取網址可能對您造成影響。假設 HTML 網頁 包含類似下方的圖片：

<img src="/images/foo.jpeg" loading="lazy" />

如果你透過刪除或變更延遲載入的方式更新或變更網站 圖片顯示，使用者查看 HTML 快取版本時，可能會顯示不正確或 缺少圖片 — 因為這些檔案仍會快取原始的 /images/foo.jpeg 回訪您的網站

如果您謹慎了，這可能不會影響您。不過基本上 別忘了，使用者快取您的網站時， 不再只是 伺服器相反地，這個物件可能存在於使用者快取的「片段」中 。

一般而言，大多數與快取相關的指南都會討論 設定—您對 1 小時、數小時等時間執行快取。如要設定 快取種類時，請使用這種標頭 (快取 3600 秒或 小時)：

Cache-Control: max-age=3600,immutable,public

最後一點。如果您製作的內容通常只有 例如新聞報導之類的 快取，建議您使用上方合理的預設值。我們經常 過度強調快取的價值，而非使用者希望隨時看到最新 ，例如新聞報導的重要更新 活動。

非 HTML 選項

除了 HTML 之外，還有一些其他方式可用於處理中間地的檔案 包括：

  • 一般來說，請找出不影響他人的素材資源

    • 舉例來說，請避免使用 CSS，因為這會影響 HTML 算繪

  • 在即時文章中使用的大型圖片

    • 使用者或許不再瀏覽任何一篇文章 請避免快取相片或主頁橫幅 廢棄物儲藏

  • 代表本身有效期的資產

    • 天氣的 JSON 資料可能每小時發布一次，因此 您可以在一小時內快取先前的結果，這項結果不會在視窗中改變
    • 開放原始碼專案的建構作業可能受到頻率限制，因此請快取 狀態可能會變更

摘要

當使用者第二次載入您的網站，您就已經進行了 並更願意回來觀看更多產品或服務。在此 原因不僅限於縮短載入時間 各式各樣的選項 可確保瀏覽器正常運作 還必須提供快速且最新的體驗

快取不是網路上的新概念，但可能需要 預設—考慮使用一種並強力啟用，以獲得更好的快取策略 適時提供所需協助感謝您閱讀本信！

另請參閱

如需 HTTP 快取的一般指南，請前往 使用 HTTP 快取防止不必要的網路要求。