浏览器缓存是浏览器用来在本地存储网页资源的机制。这增加了性能增益，最大限度地减少了带宽消耗，并总体上创造了更快捷的体验。
一、什么是浏览器缓存
缓存是一个软件或硬件组件，用于临时存储值以便将来更快地访问。浏览器缓存是一个小型文件数据库，其中包含下载的网页资源，例如图像、视频、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 非常简单。大多数时候，为静态资产实施“通用”缓存策略足以改变网站的性能。然而，它确实在许多其他事情之上增加了一层额外的“担忧”，我们认为事情不应该是这样的。
