目录
对缓存控制 HTTP 标头是什么以及它如何与您的 WordPress 网站配合使用感到困惑？
简而言之，cache-control 是一个 HTTP 标头，它为网站上的某些静态资源（例如图像）指定浏览器缓存策略。
在本文中，我们将解释什么是 cache-control 以及它如何影响您网站的行为。但在我们进入 cache-control 标头之前，我们首先需要解释浏览器缓存的概念。
以下是我们将介绍的内容：
- 什么是浏览器缓存
- 什么是 cache-control 及其工作原理（HTTP 标头）
- 不同的 cache-control 指令
- 缓存控制如何应用于 WordPress/WP Rocket 用户
让我们深入研究一下……
什么是浏览器缓存？
当有人第一次访问您的网站时，他们的 Web 浏览器需要请求并下载每个文件来呈现您的页面。
但是，在后续访问中，强迫他们在每次访问时请求和下载每个资源是没有意义的。
例如，您的 logo 可能会在每个页面上加载，但它不会经常更改。强制访问者的浏览器在每次页面加载时重新下载您的徽标只是浪费资源，会降低您的网站速度。
浏览器缓存允许您通过在访客的本地计算机上保存某些类型的资源来避免这种情况。然后，访问者的浏览器可以在本地加载该资源，而不是重新下载它，这将加快您网站的加载时间并为访问者创造更好的体验。这就是为什么您通常将“利用浏览器缓存”视为 GTmetrix 和 Pingdom 等工具中的常见建议。
为了启用浏览器缓存，您需要配置您的 Web 服务器，以便它告诉访问者的浏览器要存储哪些类型的文件以及在重新下载之前存储它们多长时间。
例如，您可以将服务器配置为：
“将 JPEG 文件存储一年，但只存储 PNG 文件一个月”。
基本上，您为访问者的浏览器应存储某些内容的时间设置到期日期。
为什么要添加到期日期？因为您想确保您的访问者仍然获得最新版本的页面。通过设置到期日期，您可以确保访客定期重新下载相关资源，以确保获得更新的体验。
有关更多信息，请查看我们关于浏览器缓存的完整解释文章。
注意 – 浏览器缓存是与页面缓存不同的策略。
那么，什么是 Cache-Control？
Cache-control 是控制此浏览器缓存行为的主要方法之一，另一种是 expires 标头。
基本上，cache-control 允许您设置这些 “过期” 日期，以控制访问者的浏览器是从其本地缓存加载资源，还是向您网站的 Web 服务器发送请求以下载资源。
它使您可以对每个单独资源的行为方式进行大量控制，还可以控制谁可以缓存您的内容。例如，您可以说访问者的浏览器可以缓存某个图像，但 CDN（例如 Cloudflare）无法缓存它。
更具体地说，cache-control 是一个 HTTP 标头，它给我们带来了另一个需要定义的术语。
什么是 HTTP 标头？
HTTP 是超文本传输协议 （Hypertext Transfer Protocol） 的缩写，用于控制客户端和服务器的通信方式。就我们而言，客户端是访问者的 Web 浏览器，服务器是您的 WordPress 网站的服务器。
当客户端需要文件时，它会向服务器发送请求，而服务器会向客户端发送响应。
例如，如果您的网站有图像，则访问者的浏览器将首先从服务器请求该图像，然后服务器将使用图像文件进行响应。然后，浏览器将对您网站上的每个资源重复相同的过程，包括 CSS 样式表、JavaScript 等。
HTTP 标头允许客户端或服务器通过这些客户端请求和服务器响应发送其他信息。有不同类型的 HTTP 标头，cache-control 就是其中之一。
大多数现代 Web 浏览器都包含开发人员工具，这些工具可让您查看与加载网页所涉及的每个请求/响应关联的 HTTP 标头。
在 Chrome 中，您可以：
- 打开开发人员工具 （CTRL + Shift + I）
- 转到 Network （网络） 选项卡
- 重新加载页面
- 选择要分析的资源
- 查看 Headers 选项卡
例如，以下是一篇博客文章的特色图片的所有 HTTP 响应标头：
您可以看到 cache-control 是这些标头之一，但还有许多其他标头可以传达其他信息。我们甚至在 x-curious 标题中添加了一个漂亮的小复活节彩蛋。
HTTP 标头可以双向运行。也就是说，您的 Web 浏览器可以将 HTTP 标头附加到它向服务器发出的请求，并且服务器可以将 HTTP 标头附加到它发送到浏览器的响应中。
HTTP 标头由键值对组成。“key” 是冒号左侧的部分，而 “value” 是右侧的部分。更具体地说，该值称为 cache-control 的指令。
在上面的示例中，键是 “cache-control”，值/指令是 “max-age=31536000” （接下来将详细介绍这是什么意思）。
Cache-Control 是如何工作的？
好的，此时您知道什么是浏览器缓存了。您还知道 cache-control 是控制浏览器缓存行为的一种方法，而 cache-control 是在访问者的浏览器与您的 Web 服务器通信时传递的 HTTP 标头。
现在，让我们了解一下缓存控制的实际工作原理以及可用于控制浏览器缓存行为的不同指令。
正如你在上面学到的，cache-control 是一个键值对，看起来像这样：
缓存控制：max-age=31536000
在此示例中，指令为 max-age=31536000，但您可以使用其他 cache-control 指令，还可以使用逗号组合多个指令。
让我们来看看最常见的 cache-control 指令。
缓存控制：max-age=<seconds>
max-age 指令定义了浏览器在下载新资源之前可以重用获取的资源的时间。max-age 数字以秒为单位，并在发出请求后立即启动。
例：
缓存控制：max-age=31536000
在此示例中，该指令告知访客的浏览器从原始请求之日起一年内使用缓存的资源。一年有 31,536,000 秒。
许多 cache-control 响应将仅包含 max-age 指令，因此您可以将其视为 “default” 指令。
max-age 指令可以由 Client 端和服务器使用。
cache-control：public 和 cache-control：private
public 和 private 指令是两个相反的指令，用于控制哪些类型的 Client 端可以缓存资源。
public 指令意味着资源可以由任何缓存存储。例如，访客的浏览器、CDN 等。
另一方面，private 指令意味着访客的浏览器仍可缓存资源，但不能由其他中间缓存（如 CDN）缓存。
您通常会对包含用户信息的内容使用 private 指令，这些内容您不希望 CDN 缓存，但访客的浏览器可以缓存这些内容。
public 和 private 指令仅由服务器在其 HTTP 响应中使用。
缓存控制：S-maxage
s-maxage 指令类似于 max-age，但专门用于共享缓存（例如 CDN）。它允许您控制这些共享资源可以继续为缓存中的资源提供服务的时间。
例如，如果您使用的是 CDN，这将是控制 CDN 缓存资源时间的一种方法（只要您的 CDN 遵守指令，大多数流行的 CDN 就是这样做的）。
s-maxage 指令仅由服务器在其 HTTP 响应中使用。
缓存控制：无缓存
由于名称的原因，no-cache 指令有些令人困惑。它允许任何缓存存储响应，但存储的响应必须在使用之前经过源服务器的验证。也就是说，在使用缓存的资源之前，访客的浏览器必须检查以确保资源未更改。
如果你想完全避免将响应存储在任何缓存中，你实际上想使用 no-store，这是我们将要研究的下一个指令。
客户端和服务器都可以使用 no-cache 指令。
缓存控制：无存储
no-store 指令不允许浏览器和中间缓存存储资源。客户端始终需要在每次页面加载时从服务器请求此资产。
通常，您会将其用于您永远不希望缓存的非常敏感的信息，例如银行信息。
客户端和服务器都可以使用 no-store 指令。
缓存控制：max-stale[=<秒>]
与都可以在服务器的 HTTP 响应中使用的其他指令不同，max-stale 指令仅用于 Client 端对服务器的请求。
max-stale 指令告诉服务器，客户端愿意接受超过其新鲜度生命周期的响应max-stale 指令中的数字（以秒为单位）。
结论
最后，让我们从 WordPress 用户的角度回顾一下我们所介绍的内容。
Cache-control 是一个 HTTP 标头，可让您控制访问者的浏览器（或 CDN）应如何/多长时间在您的网站上缓存不同类型的资源。
通过在本地缓存这些资源，您可以加快网站的页面加载时间。但是，您不希望永久缓存资源，因为您还希望确保访客始终看到您网站的最新版本。正确实现浏览器缓存可以让您取得适当的平衡。
您可以向 cache-control 添加不同的指令，但最“常见”的指令是 max-age，它指定访客的浏览器在再次请求资源之前应存储资源多长时间（以秒为单位）。
发表回复