浏览器缓存是如何工作的？

已发表: 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 中实现浏览器缓存，从而消除所有担忧。