Tag Archive: 缓存

4月 11th, 2022

我相信您已经注意到,当您第一次打开网站时,加载需要一些时间。但是,当您在一段时间后再次打开它时,该网站的加载速度要快得多。想象一下,如果一个网站每次加载都需要相同的时间,那么浏览速度会有多慢。这一切都要归功于一个叫做 HTTP 缓存的作用。

什么是 HTTP 缓存?

HTTP缓存是将一些常用或经常使用的数据存储在快速访问的地方的想法。有了这个,很有可能可以更快地访问最需要的数据,因为计算机不必走太远就可以获取它。对于 Web 浏览,当您的 Web 浏览器(例如 Chrome)在本地存储中存储网站或 Web 应用程序的副本时,会考虑缓存。一旦网站被缓存,网络浏览器就不必重新下载所有服务器数据,这将使浏览速度更快。

例如,一旦下载了网站的 CSS 文件,浏览器就不必为会话的每个页面都下载它。许多 JavaScript 文件、图像(例如网站的徽标和社交媒体图标)甚至一些动态内容也是如此。通过使用缓存标头启用缓存。推荐阅读:《http和https的区别》

HTTP 中的缓存标头

HTTP缓存有两个主要的缓存头,第一个称为“Cache-Control”,第二个称为“Expire”。

Cache-Control

您可以将 Cache-Control 视为在用户浏览器中切换缓存的开关。添加此标头后,它将为所有受支持的 Web 浏览器启用缓存。如果此标头不存在,则即使浏览器支持缓存,也不会保留网页内容的缓存。Cache-control有两种隐私设置,第一种是Public,第二种是Private。

在 Public 的情况下,资源可以由任何中间代理缓存,例如内容交付网络 (CDN)。带有 Private 响应的 Cache-Control 标头将告诉浏览器缓存将只为单个用户完成,而不是为任何中间代理完成。

Cache-Control 标头中的值“max-age”设置缓存内容的时间。这个时间以秒为单位。

Cache-Control:public, max-age=31536000

Expire

当代码中存在 Cache-Control 时,将使用 Expires 标头。这是一个简单的 HTTP 缓存标头,它设置任何缓存资源被视为无效的日期。一旦缓存过期并且用户加载网站,网络浏览器将再次简单地请求页面的所有内容。

有条件的请求

上面讨论的标头只是告诉浏览器何时从 Web 服务器检索数据。另一方面,条件请求告诉浏览器如何检索它们。条件请求告诉浏览器它如何询问服务器缓存中的数据副本是否已过时。

在这个过程中,浏览器将一些关于它缓存的资源的数据发送到它的内存中,服务器读取这些数据后,判断数据是否过期。

基于时间的请求

在基于时间的请求中,检查请求的资源是否在服务器上发生了变化。如果浏览器中缓存的副本是最新的,服务器将返回代码 304。

要按时间设置条件请求,您可以在响应标头中使用“Last-Modified”。

Cache-Control:public, max-age=25998579

Last-Modified: Fri, 08 Jul 2018 15:25:00 GMT

基于内容

在基于内容的请求中,检查服务器副本和缓存副本的 MD5 哈希(或任何其他可行选项)。这告诉数据是否相同;如果数据不同,MD5校验和将不匹配,服务器将发送一个新的资源副本。推荐阅读:《如何清除浏览器缓存》

这是通过标题中的“ETag”完成的。它的价值在于资源的消化。

Cache-Control:public, max-age=25998579

ETag: “496d7131f15f0fff99ed5aae”

Visibility

几乎所有现代浏览器都包含一些与开发相关的工具,可让您检查网页的资源、源代码和其他方面。其中,您可以找到一个工具来查看任何应用程序返回的标头。

在 Google Chrome 上,要查看这些标题,您可以右键单击网页的空白区域并单击“检查”或按 CTRL+SHIFT+I 打开 DevTools。在此工具中,单击网络选项卡并按 CRTL+R 重新加载以查看页面的所有标题。

HTTP 缓存中的用例

以下是 HTTP 缓存的一些用例,如下所示:

对于静态资源

对于页面的静态资源,例如图像、JS 文件和任何 CSS 文件,您可以选择主动缓存内容。不必加载这些文件将带来令人印象深刻的性能改进。对于这个用例,选择 max-age 值超过一个月甚至一年的 Cache-Control Header。

Cache-Control:public; max-age=31536000

动态内容

对于页面的动态内容,您需要自己考虑浏览器应该缓存哪些文件以及缓存多长时间。如果内容经常更改,您需要确保您选择的缓存持续时间不会给用户带来任何问题。

私有内容的缓存

正如我们在 Cache-Control 部分所讨论的,如果页面的内容本质上是私有的,您可以通过在标头中添加“Cache-Control: private”来防止它被 CDN 等中间代理缓存。另一种更安全的方法是根本不缓存任何私人内容。

实现 HTTP 缓存

既然您知道 HTTP 缓存是什么以及它是如何工作的,那么让我们看看如何在您的网站上实现它。对于不同的服务器类型,HTTP 缓存的实现有点不同。在我们的例子中,让我们看一下通过 .htaccess 文件实现缓存。

要启用缓存,您可以在服务器上的 .htaccess 文件中添加标头,例如:

FilesMatch “\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”

Header set Cache-Control “max-age=31536000, public”

/FilesMatch

以上将全部缓存为 pdf、Flv、jpg 以及“文件匹配”中提到的其他格式,为期一年。

总结

HTTP 缓存是最重要的技巧之一,它可以让访问者更快地浏览您的网站,现在您可以了解它是如何工作的,您可以在您的网站和 Web 应用程序上实施它,让您的用户和节省您的服务器带宽。推荐相关阅读:《CDN缓存工作原理以及条件》

TAGS: ,