瀏覽器緩存是如何工作的？

已發表: 2017-05-04

瀏覽器緩存是瀏覽器用來存儲本地網頁資源的一種機制。這增加了性能提升，最大程度地減少了帶寬消耗，並總體上創造了更快捷的體驗。在本文中，我們將解釋瀏覽器緩存的工作原理以及如何在您的網站上實現它。

什麼是瀏覽器緩存？

緩存是一種軟件或硬件組件，用於臨時存儲值以便將來更快地訪問。瀏覽器緩存是一個小型文件數據庫，其中包含下載的網頁資源，例如圖像、視頻、CSS、Javascript 等。其背後的基本思想如下：

瀏覽器從 Web 服務器請求一些內容。如果內容不在瀏覽器緩存中，則直接從 Web 服務器檢索。如果內容先前已緩存，則瀏覽器會繞過服務器並直接從其緩存中加載內容。

內容是否過期取決於緩存的內容是否已過期。另一方面，新鮮意味著內容尚未過期，可以直接從瀏覽器緩存中提供，而無需涉及服務器。

術語驗證是指需要根據服務器擁有的最新版本檢查的內容。簡而言之，確定內容是否過時。當內容在過期日期之前從緩存中刪除時，就會發生失效。這可以由服務器強制，以防內容髮生更改，並且瀏覽器需要具有最新版本以免引入任何問題。

Web 開發人員和管理員可以通過使用特定的 HTTP 標頭來利用瀏覽器緩存。這些標頭指示 Web 瀏覽器何時緩存資源、何時不緩存以及緩存多長時間。使用與 HTTP 緩存相關的標頭通常會令人沮喪，因為在 HTTP 協議的各種轉世中與標頭有很大的重疊。再加上中間的奇怪網絡代理、舊瀏覽器、衝突的緩存策略和實現（例如不同的 WordPress 插件），它很快就會變得令人頭疼。

瀏覽器緩存標頭

定義什麼可以緩存或不可以緩存多長時間的一組規則稱為緩存策略。 這是由網站所有者通過使用緩存響應標頭來實現的。雖然這可以通過許多不同的方式來實現，但您可能應該只關心緩存控制，在開始時。

緩存控制

Cache-control 標頭是在 HTTP/1.1 中引入的，被認為是最現代的實現。您可以使用幾個不同的值，具體取決於您希望瀏覽器的行為方式。使其用途廣泛。下面是 Cache-Control 指令的列表：

無緩存
指示您的 Web 瀏覽器不要立即引用緩存，而是根據服務器驗證內容。如果它是新鮮的，那麼它可以從緩存中提供。
無店
告訴瀏覽器不要以任何方式緩存內容。它主要用於處理敏感數據或頻繁更改的數據。
上市
將內容標記為公開，這意味著它可以被瀏覽器和任何中間方（例如代理等）緩存。
私人的
用於將內容標記為私有，這意味著它只能被瀏覽器緩存，而不能被中間代理等緩存。這通常是指與用戶相關的數據。
最大年齡
Max-age 表示在客戶端需要重新驗證內容之前，內容可以保留在瀏覽器緩存中的最長時間（以秒為單位）。與我們稍後將訪問的 Expires 標頭相反，max-age 定義了從緩存內容開始以秒為單位的相對值，而不是絕對的到期日期。
S-maxage
這類似於 max-age 但它僅用於中間緩存。
必須重新驗證
強制瀏覽器在每次需要時重新驗證內容，而不是直接從瀏覽器緩存中提供。
如果發生網絡中斷，這很方便。
代理重新驗證
類似於 must-revalidate，但僅適用於中間緩存。
無變換
指示瀏覽器不要以任何方式（通常是壓縮等）轉換從服務器接收到的內容。

埃塔格

Etag 響應標頭用於標識特定資源。每次某個資源發生變化時，都會生成一個新的 Etag。這樣就節省了帶寬，因為如果 Etag 沒有改變，Web 服務器不需要給出完整的響應。因此，在 Nginx 和 Apache 上默認啟用 Etag 標頭，並且自動生成 Etag 值，因此您無需指定任何內容。

過期

這是在 HTTP/1.0 中引入的，並定義了將來內容將被視為陳舊的特定日期。這實際上是內容的“最佳使用日期”。例如，到期時間：2017 年 5 月 25 日星期四 12:30:00 GMT

編譯指示

這是一個有點過時的 HTTP/1.0 標頭，主要用於向後兼容。插入Pragma: no-cache將使您的瀏覽器的行為類似於Cache-Control: no-cache 。

如何在您的網站上實施緩存策略

有兩種方法可以在您的網站上實施緩存策略。首先是在 Web 服務器配置中定義緩存響應標頭。第二種是直接在 PHP 中進行。以下是兩個最流行的 Web 服務器 Apache2 和 Nginx 的示例：

阿帕奇2

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=84600, public" </filesMatch>

Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 365d; add_header Cache-Control "public" ; }

如您所見，它非常簡單。在第一個示例中，我們使用 apache2 的 FileMatch 指令來匹配一組特定的文件類型（.ico、.pdf 等）並將它們公開，最大年齡為 84600 秒。在第二個中，我們再次使用 nginx 的 location 指令匹配某些文件類型，並包含 365 天的 max-age。我們還使用 add header 子句將它們定義為“public”。

PHP

如果您希望將響應標頭直接添加到您的代碼中，只需使用 PHP 的 header 命令。

<?php header("Cache-Control: no-cache"); header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); header("Cache-Control: max-age= 604800"); ?>

如何測試它是否有效

您可以通過使用例如 Firefox Web 控制台或 Chrome 的開發者工具輕鬆測試以查看瀏覽器緩存規則：

點擊右上角的漢堡圖標。
選擇更多工具 > 開發者工具
在地址欄中輸入您的 URL，然後按 Enter。

當您的 URL 正在加載時，您應該會看到一個請求列表。通過單擊選擇資源。檢查右側的響應標頭，尤其是狀態代碼。它打印 200 HTTP 代碼，但在括號中指出它來自內存緩存。

這意味著資源是從本地緩存存儲中自動加載的，而不是從服務器請求它。

如果您的 Cache-Control 標頭上有“必須重新驗證”子句，則狀態代碼將為 304（未修改）。這意味著您的瀏覽器針對服務器重新驗證了資源，並且服務器響應內容沒有更改，因此可以從瀏覽器的緩存中提供它。

通過選中禁用緩存複選框並點擊重新加載來繼續禁用緩存。

在這種情況下，您會看到狀態代碼為 200，而沒有任何跡象表明它使用了緩存。瀏覽器從 Web 服務器請求資源，Web 服務器通過返回一個新副本來響應。

結論

瀏覽器緩存和緩存策略會變得相當複雜。但是，正如我們所展示的那樣，開始嘗試使用 Cache-Control 是很簡單的。大多數情況下，為靜態資產實施“通用”緩存策略足以改變您網站的性能。然而，它確實在許多其他事情之上增加了一層額外的“擔憂”，我們認為它不應該是這樣的。在我們的下一篇文章中關注我們，我們將展示我們如何在 Pressidium 中實現瀏覽器緩存，從而消除所有擔憂。