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

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

image 13
image 13

一、什么是浏览器缓存

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