一文了解什么是浏览器缓存

浏览器缓存是浏览器用来在本地存储网页资源的机制。这增加了性能增益，最大限度地减少了带宽消耗，并总体上创造了更快捷的体验。

一、什么是浏览器缓存

缓存是一个软件或硬件组件，用于临时存储值以便将来更快地访问。浏览器缓存是一个小型文件数据库，其中包含下载的网页资源，例如图像、视频、CSS、Javascript 等。

浏览器从 Web 服务器请求一些内容。如果内容不在浏览器缓存中，则直接从 Web 服务器检索。如果内容先前已缓存，则浏览器会绕过服务器并直接从其缓存加载内容。

根据缓存内容是否已过期，内容被视为过时。另一方面，新鲜意味着内容尚未超过其过期日期，可以直接从浏览器缓存提供服务，而无需涉及服务器。

二、浏览器缓存标头

定义什么可以缓存、什么不可以缓存以及缓存多长时间的规则集称为缓存策略。 这是由网站所有者通过使用缓存响应标头来实现的。尽管这可以通过许多不同的方式来实现，但一开始您可能应该只关心缓存控制。

缓存控制

缓存控制标头是在 HTTP/1.1 中引入的，被认为是最现代的实现。您可以使用多种不同的值，具体取决于您希望浏览器的行为方式。使其用途广泛。以下是缓存控制指令的列表：

1.无缓存

指示您的 Web 浏览器不要立即引用缓存，而是根据服务器验证内容。如果是新鲜的，则可以从缓存中提供。??

2.无存储

告诉浏览器不要以任何方式缓存内容。它主要在处理敏感数据或频繁更改的数据时使用。

3.Public

将内容标记为公开，这意味着它可以被浏览器和任何中介方（例如代理等）缓存。?

4.私有

用于将内容标记为私有，这意味着它只能由浏览器缓存，而不能由中间代理等缓存。这通常指与用户相关的数据。

5.Max-age

Max-age 表示在客户端需要重新验证内容之前，内容可以保留在浏览器缓存中的最长时间（以秒为单位）。与我们稍后将访问的 Expires 标头相反，max-age 定义了从内容被缓存的时间算起的相对值（以秒为单位），而不是绝对的到期日期。

6.S-maxage

这与 max-age 类似，但它仅用于中间缓存。

7.Must-revalidate

强制浏览器在每次需要时重新验证内容，而不是直接从浏览器缓存中提供内容。

这在发生网络中断时非常方便。

8.Proxy-revalidate

与 Must-revalidate 类似，但仅适用于中间缓存。

9.no-transform

指示浏览器不以任何方式转换从服务器接收的内容（通常是压缩等）。?

三、如何在您的网站上实施缓存策略

有两种方法可以在您的网站上实施缓存策略。第一个是在 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";

}

四、如何测试是否有效

您可以轻松测试以查看浏览器缓存规则，例如使用 Firefox Web 控制台或 Chrome 的开发人员工具：

单击右上角的汉堡包图标。

选择更多工具 > 开发者工具

在地址栏中输入您的 URL，然后按 Enter 键。

当您的 URL 加载时，您应该会看到请求列表。单击资源即可选择该资源。检查右侧的响应标头，特别是状态代码。它打印 200 HTTP 代码，但在括号中指示它来自内存缓存。?

五、结论

浏览器缓存和缓存策略可能变得相当复杂。但正如演示的那样，开始尝试 Cache-Control 非常简单。大多数时候，为静态资产实施“通用”缓存策略足以改变网站的性能。然而，它确实在许多其他事情之上增加了一层额外的“担忧”，我们认为事情不应该是这样的。