性能文章>HTTP缓存>

HTTP缓存转载

2年前
339101

当有人访问一个网站时,该网站需要展示和操作的一切都必须来自某个地方。 所有文本、图像、CSS 样式、脚本、媒体文件等都必须由浏览器检索以显示或执行。 你可以让浏览器选择它可以从哪里检索资源,这会对你的页面加载速度产生很大的影响。

浏览器第一次加载网页时,会将页面资源存储在 HTTP 缓存中。 下次浏览器点击该页面时,它可以在缓存中查找先前获取的资源并从磁盘中检索它们,这通常比从网络下载它们的速度要快。

虽然 HTTP 缓存是根据 Internet 工程任务组 (IETF) 规范进行标准化的,但浏览器可能有多个缓存,它们在获取、存储和保留内容的方式上有所不同。 您可以在这篇出色的文章 A Tale of Four Caches 中了解这些缓存是如何变化的。

当然,您页面的每个首次访问者都没有为该页面缓存任何内容。 即使是重复访问者,在 HTTP 缓存中也可能没有多少; 他们可能已经手动清除它,或者将浏览器设置为自动清除,或者使用控制键组合强制加载新页面。 尽管如此,您的大量用户可能会重新访问您的网站,其中至少有一些组件已经缓存,这可能会在加载时间上产生巨大差异。 最大化缓存使用对于加快回访至关重要。

缓存的工作原理是根据某些页面资源的更改频率对其进行分类。 例如,您网站的徽标图像可能几乎永远不会更改,但您网站的脚本可能每隔几天就会更改一次。 确定哪些类型的内容更静态,哪些更动态,这对您和您的用户都是有益的。

同样重要的是,我们认为的浏览器缓存实际上可能发生在原始服务器和客户端浏览器之间的任何中间站点,例如代理缓存或内容交付网络 (CDN) 缓存。

缓存头的两种主要类型,cache-control 和 expires,定义了资源的缓存特性。 通常,cache-control 被认为是一种比 expires 更现代和更灵活的方法,但两个标头可以同时使用。

缓存标头应用于服务器级别的资源 - 例如,在 Apache 服务器上的 .htaccess 文件中,几乎有一半的活动网站使用 - 以设置它们的缓存特征。 通过识别资源或资源类型(例如图像或 CSS 文件),然后为具有所需缓存选项的资源指定标头来启用缓存。

可以使用逗号分隔列表中的各种选项启用缓存控制。 下面是 Apache .htaccess 配置的示例,它将各种图像文件类型的缓存设置为一个月和公共访问(下面讨论了一些可用选项),与扩展列表匹配。

 
<filesMatch ".(ico|jpg|jpeg|png|gif)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

This example sets caching for styles and scripts, resources that are probably more likely to change than the images, to one day and public access.

此示例将样式和脚本(它们是可能比图像更易变更的资源)的缓存设置为缓存 1天 和 public 属性。

 
<filesMatch ".(css|js)$">
 Header set Cache-Control "max-age=86400, public"
</filesMatch>

缓存控制有许多选项,通常称为指令,可以设置这些选项来具体确定如何处理缓存请求。 下面解释了一些常见的指令; 您可以在Performance Optimization section 和 Mozilla Developer Network 找到更多信息。

  • no-cache: 有点用词不当,指定可以缓存内容,但如果指定,则必须在每个请求上重新验证,然后才能将其提供给客户端。 这会强制客户端检查新鲜度,但如果资源没有更改,则允许它避免再次下载资源。 与 no-store 互斥。

  • no-store: 表示内容实际上不能被任何主缓存或中间缓存以任何方式缓存。 对于可能包含敏感数据的资源或几乎可以肯定会随着访问而改变的资源,这是一个不错的选择。 与 no-cache 互斥。

  • public: 表示内容可以被浏览器和任何中间环节缓存。 覆盖使用 HTTP 身份验证的请求的默认私有设置。 与 private 互斥。

  • private: 指定可以由用户浏览器存储但不能被任何中间环节缓存的内容。通常用于特定于用户但不是特别敏感的数据。与 public 互斥。

  • max-age: 定义在必须重新验证或从原始服务器再次下载内容之前可以缓存内容的最长时间。 此选项通常替换 expires 头(见下文)并以秒为单位取值,最大有效期限为一年(31536000 秒)。

您还可以通过为某些类型的文件指定过期或过期时间来启用缓存,这会告诉浏览器在从服务器请求新副本之前使用缓存资源的时间。 expires 头只是设置将来内容应该过期的时间。 在那之后,对内容的请求必须返回到原始服务器。 使用更新和更灵活的缓存控制标头,过期标头通常用作后备。

下面是一个示例,说明如何在 Apache 服务器上的 .htaccess 文件中设置缓存。

 
## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
## EXPIRES CACHING ##

(来源: GTmetrix)

如您所见,在此示例中,不同类型的文件具有不同的到期日期:图像在访问/缓存后一年内不会到期,而脚本、PDF 和 CSS 样式在一个月内到期,以及任何未明确列出的文件类型 两天后到期。 保留期限由您决定,应根据文件类型及其更新频率进行选择。 例如,如果您定期更改 CSS,您可能希望使用更短的到期时间,甚至根本不使用,并让它默认为最少两天。 相反,如果您链接到一些几乎从不更改的静态 PDF 表单,您可能希望为它们使用更长的到期时间。

提示:不要使用超过一年的有效期; 这实际上永远在互联网上,并且如上所述,是缓存控制下的 max-age 的最大值。

缓存是提高页面加载速度和用户体验的可靠且省事的方法。 它足够强大,可以为特定内容类型提供复杂的细微差别,但也足够灵活,可以在您的网站内容更改时轻松更新。

对缓存保持自信,但也要注意,如果您稍后更改保留期较长的资源,您可能会无意中剥夺一些重复访问者的更新内容。 您可以在 Caching Best Practices 和 Max-age Gotchas 中找到有关缓存模式、选项和潜在陷阱的精彩讨论。

点赞收藏
分类:标签:
风之石
请先登录,感受更多精彩内容
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步
1
0