首頁  >  文章  >  web前端  >  如何強制刷新快取的 CSS 資料:查詢字串與檔案重新命名?

如何強制刷新快取的 CSS 資料:查詢字串與檔案重新命名?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-08 04:37:01526瀏覽

How to Force a Refresh of Cached CSS Data: Query String vs. File Renaming?

如何強制刷新快取的 CSS 資料

更新網站的 CSS 時,瀏覽器可能會繼續快取過時的版本,從而導致渲染問題。本文探討了強制刷新快取 CSS 的幾種方法。

TL;DR

要解決快取問題,請考慮以下選項:

  • 修改檔案名稱或查詢字串
  • 實作每個版本僅發生一次的變更
  • 優先於查詢字串變更進行檔案重新命名
  • 設定最佳HTTP 標頭以最大化快取優勢

深入分析

我們想要實現什麼?
理想的快取行為包括在第一次請求新資源時獲取新資源並檢索它此後,它會從本地快取中刪除,直至過期。

觀察到的快取行為
為了了解瀏覽器的快取行為,表格總結了各種場景及其觀察到的結果。

Type Cache Headers Observed Result
Static filename Expiration 1 Year Taken from cache
Static filename Expire immediately Never caches
Static filename None HTTP 304 (not modified)
Static query string Expiration 1 Year HTTP 304 (not modified)
Static query string Expire immediately HTTP 304 (not modified)
Static query string None HTTP 304 (not modified)
Random query string Expiration 1 Year Never caches
Random query string Expire immediately Never caches
Random query string None Never caches

快取標頭

觀察到的結果 th> 靜態檔案名稱 有效期限1 年 從快取取得 靜態檔名 立即過期 從不快取 靜態檔名 無 HTTP 304(未修改) 靜態查詢字串 過期1 年 HTTP 304(未修改)已修改) 靜態查詢字串 立即過期HTTP 304(未修改) 靜態查詢字串 無 HTTP 304(未修改) 隨機查詢字串 過期1 年 從不緩存 隨機查詢字串 立即過期 從不快取 隨機查詢字串 無 td> 從不緩存
解決方案選項

查詢字串
將隨機參數附加到CSS URL 會強制發出新的HTTP 200 請求,但僅限於初次遇到時。後續請求可能仍會傳回 304。

路徑修改
建立新路徑提供了更永久的解決方案。您可以自動執行使用版本號或其他識別碼重寫路徑的程序。

文件重新命名
另一種方法是在每個版本中重命名 CSS 文件,以確保新的請求當 HTML 中引用更新的路徑時。

結論透過實施建議的技術,您可以強制刷新快取的CSS 資料並確保您的用戶收到最多的內容-最新的CSS 更新,而不影響緩存的優勢。

以上是如何強制刷新快取的 CSS 資料:查詢字串與檔案重新命名?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn