首頁 >web前端 >js教程 >HTTP 快取：您需要了解的一切

HTTP 快取：您需要了解的一切

DDD原創: 2025-01-20 02:32:14242瀏覽

HTTP Caching : Everything You Need to Know

HTTP快取機制詳解

HTTP快取是一種透過降低伺服器負載、加快客戶端回應速度和節省網路頻寬來提升網頁效能的技術。 HTTP快取主要分為兩種：強制快取和協商快取。

強制快取

強制快取允許客戶端在指定的時間段內直接使用本地快取的資源，無需向伺服器發送請求。強制快取由伺服器指定的回應頭控制，主要透過兩個欄位：Cache-Control 和 Expires。

Cache-Control

Cache-Control 是一個通用頭部，它指定了資源的最大有效期(max-age)、快取是否可以共享(public 或private) 以及是否允許修改(no-cache 或no -store)。

範例：

<code>Cache-Control: max-age=3600</code>

以上表示資源有效期限為 3600 秒，可以快取。

Expires

Expires 是一個已棄用的字段，它指定快取的絕對過期時間。

範例：

<code>Expires: Wed, 23 Aug 2024 03:36:26 GMT</code>

這意味著資源將在 2024 年 8 月 23 日凌晨 3:36:26 過期。

如果同時存在 Cache-Control 和 Expires，則 Cache-Control 優先。

協商快取

協商快取要求客戶端在每次請求時檢查伺服器資源是否已更新。如果未更新，伺服器將傳回 304 狀態碼和空響應正文，允許用戶端繼續使用本機快取。如果已更新，伺服器將傳回 200 狀態碼和新的資源，取代本機快取。協商快取涉及伺服器和客戶端的頭部，主要是 Last-Modified/If-Modified-Since 和 ETag/If-None-Match。

Last-Modified/If-Modified-Since

Last-Modified 是一個伺服器端字段，指示資源的最後修改時間。例：

<code>Last-Modified: Tue, 22 Aug 2024 02:36:26 GMT</code>

這意味著資源最後修改於 2024 年 8 月 22 日凌晨 2:36:26。

If-Modified-Since 是一個客戶端字段，指示資源的最後檢索時間。例：

<code>If-Modified-Since: Tue, 22 Aug 2024 02:36:26 GMT</code>

這表示客戶端在 2024 年 8 月 22 日凌晨 2:36:26 檢索了資源。

如果兩個時間戳相等或 Last-Modified 更早，則資源未更新。如果 Last-Modified 更晚，資源已更新。

ETag/If-None-Match

ETag 是一個伺服器端字段，表示資源的唯一識別碼。例：

<code>ETag: '5d3a9f6d-1f86'</code>

這表示資源的識別碼是「5d3a9f6d-1f86」。

If-None-Match 是一個客戶端字段，指示資源的預期標識符。例：

<code>If-None-Match: '5d3a9f6d-1f86'</code>

這表示客戶端期望資源識別碼為「5d3a9f6d-1f86」。

如果兩個值匹配，則資源未更新。如果它們不同，則資源已更新。

HTTP快取最佳實務

結合協商快取和強制快取可以有效減少不必要的網路請求，同時確保使用者始終擁有最新內容。

通用方法：

強制快取: 對於靜態資源（例如 CSS、JS、圖片），設定較長的快取持續時間。這允許瀏覽器直接從本地儲存檢索資源，而無需聯繫伺服器。

協商快取: 對於可能變更的資源，使用協商快取。瀏覽器將發送請求以檢查資源是否已變更。如果沒有，伺服器將傳回 304 未修改回應，允許瀏覽器使用本機快取。如果資源已更改，伺服器將傳回 200 OK 和更新的資源。

範例實作：

假設我們使用 Express.js 作為後端框架：

<code>Cache-Control: max-age=3600</code>

關鍵考慮因素

版本控制: 為了最大限度地提高強制快取的有效性，請在資源 URL 中包含版本信息，例如 /static/js/main.2024082301.js。當資源更新時，更改版本號以確保用戶始終獲得最新版本。
協商快取的成本: 雖然協商快取減少了不必要的資料傳輸，但它仍然需要網路往返。對於很少更改的資源，強制快取可能更有效。