每个Web开发人员需要掌握的HTTP缓存知识

发布者:上海IT外包来源:http://www.lanmon.net点击数:898

我们每时每刻使用的互联网和手机APK都是由各种资源组成的HTML(JS,CSS)页面。这些资源中的大多数是静态资源,并且大多数资源不需要实时更新。例如,图像,CSS样式,JS库,这些静态资源构成了Internet的框架。例如,我们使用浏览器跟踪(F12->
网络)一个着名的互联网网站的主页:
每个Web开发人员需要掌握的HTTP缓存知识
这些资源文件非常小,但是因为每次刷新页面时都经常需要重新下载,如果有任何方法可以减少图像和样式等固定文件的下载,只需要实时数据。必须获取API,然后访问用户。它肯定会更快更顺畅。实际上,HTTP协议本身提供了一种解决此问题的强大机制,即今天错误想要引入的HTTP缓存缓存。作为Web开发人员,您必须精通HTTP缓存机制,这可以为我们节省大量带宽,服务器硬件,并极大地优化我们的网站和APP的性能,以改善用户体验。
缓存基础知识
让我们首先概述一下缓存的基本概念。如果我们知道某些资源(图像,CSS样式文件等)不会随着时间的推移而改变,我们可以使用缓存来保存它们。在设定的时间内,资源被认为是新鲜的,并且在此之后,其状态被设置为过期(陈旧)。
缓存允许客户端(例如浏览器)尽可能长时间地保留资源,然后在它过期后丢弃它并从服务器获取新版本。为了使高速缓存机制生效,需要一种方法来发送资源的到期时间。
为了解决这个问题,HTTP提供了两种主要方式。下面我们先讨论第一种方法。
每个Web开发人员需要掌握的HTTP缓存知识
缓存源已过期Expires和HTTP/1.0缓存
缓存已过期到期
Expires是在HTTP/1.0协议中引入的,它与Pragma,Last-Modified和If-Modified-Since一起构成了HTTP缓存系统。 Expires也是我们可以用来指示给定资源何时到期的最简单的HTTP缓存头。我们来看一个例子:每个Web开发人员需要掌握的HTTP缓存知识
上图中此徽标的到期时间为“Expires: wed,15 May 2019 88: 07: 42 GMT”。如果超过Expires指定的日期,浏览器将尝试再次检索资源。浏览器将在资源过期之前对其进行缓存,并且在刷新页面时不会从服务中下载。
使用Last-Modified和If-Modified-Since验证
要实现完美缓存,只有在确定资源已更新时才必须重新下载。实现此目的的一种方法是允许浏览器基于此资源查询服务器。浏览器如何确定资源的当前版本?有一个HTTP请求If-Modified-Since标志。
假设我们在资源到期日期5月16日请求资源,客户端浏览器将发起请求:
每个Web开发人员需要掌握的HTTP缓存知识
请求标头始终包含'If-Modified-Since',这意味着浏览器已于12月25日18日下载了服务器的修改版本。收到请求后,服务器将确定在此日期之后图像是否已更新,如果是,服务器将响应下载新图像下载。否则回复'304 Not Modified'。
每个Web开发人员需要掌握的HTTP缓存知识
收到此响应后,浏览器将从浏览器缓存中读取资源,不再从服务器下载资源。通过使用Last-Modified和If-Modified-Since,可以确保客户端不会重复下载资源,并且客户端可以在服务器端更改时更新到最新资源。
使用Pragma更新缓存
虽然HTTP/1.0无法让服务器告知客户端不缓存特定资源,但HTTP请求标头可以由客户端请求设置,并且不会为资源请求缓存。这个头方法叫做Pragma:
在Firefox的调试工具中,有一个“禁用缓存”复选框。选择后,HTTP请求将自动将“Cache-Control: no-cache”添加到请求标头中。
每个Web开发人员需要掌握的HTTP缓存知识
请求不使用缓存直接从服务器请求资源。如下所示,HTTP状态代码返回200而不是之前的304。
每个Web开发人员需要掌握的HTTP缓存知识
Pragma最初设计用于获取标题。此选项还严格支持后续HTTP/1.1兼容性。HTTP/1.1和缓存控制
为了克服Expires的限制,在HTTP/1.1中引入缓存控制极大地增强了开发人员管理缓存资源的灵活性。缓存控制并不严格依赖于日期,而是通过一些指令来完成缓存的管理。
输入max-age命令
我们可以将max-age指令视为Expires的简单替代。例如,上面对应于5月15日,即一个月到期日期(259200s),并且相应的缓存控制头响应:
每个Web开发人员需要掌握的HTTP缓存知识
请注意,max-age是与请求对应的时间,因此计算在生成缓存时开始。单位是连续的秒数。这种方法更简单,更准确,因为它没有考虑时区等因素。
max-age指令可以支持长达一年的持续时间,可以满足大多数情况的需要。
使用Etag和If-None-Match更新缓存
HTTP/1.1还引入了新的Etag缓存更新策略,以补充If-Modified-Since。我们将实体标记视为服务器唯一标识符Etag,响应标头使用带有字母数字ID的资源版本表示:
每个Web开发人员需要掌握的HTTP缓存知识
当客户端下一次请求时,它将使用“If-None-Match”标头向服务器通知特定版本资源的当前缓存资源版本ID:
每个Web开发人员需要掌握的HTTP缓存知识
如果资源的最新版本与上面的实体标签ID“5c2209c2-14d05”不匹配,则服务器将响应新版本的ID。否则回复'304 Not Modified'。
每个Web开发人员需要掌握的HTTP缓存知识
为了防止ID名称被复制,通常使用散列(例如MD5)来指示正Etag的ID。通过对资源执行散列,可以确保文件修改和验证,并且可以防止资源被篡改。
通过私人和公共手段确保缓存隐私
如上所述,基于浏览器的本机HTTP缓存,他在第一次请求时在本地缓存资源。实际上,我们请求的资源在下载到本地之前会通过一个或多个缓存或“共享”缓存(CDN)。这些缓存或代理由ISP提供商或服务提供商IT部门提供。在HTTP访问中,所有级别的中间缓存都缓存并浏览这些资源。
为了解决这个问题,HTTP/1.1引入了私有缓存和公共缓存控制指令。虽然这些说明并不完美,但我们可以用它来设置,有些资源不会在公共代理中缓存。如果多人共享计算机,则他们可以共享缓存。如果资源指定了私有缓存指令,则浏览器将仅要求用户使用它。
使用no-store和no-cache来限制缓存
HTTP/1.1纠正了HTTP/1.0 Pragma标头的缺点,并为Web开发人员提供了一种完全禁用缓存的方法。第一条指令no-cache强制缓存在重用之前重新进行身份验证。与must-revalidate不同,no-cache强制浏览器重新进行身份验证。
第二条指令no-store表示在任何情况下都不会缓存资源。
限制特定请求的缓存
如果我们想申请至少在一段时间内更新的资源怎么办?没问题!缓存控制不仅可以通过服务器控制客户端的缓存,还可以使用客户端来指示对某些缓存的限制。
max-age,no-cache和no-store指令都支持在客户端请求头中使用。但注意具体含义可能恰恰相反。例如,在请求中指定max-age标头会通知代理他们不能使用任何早于标头指定的持续时间的缓存响应。
除了上面的三条指令,我们还可以使用仅在请求标头中使用的四个缓存控制指令。
第一个是min-fres:它允许客户端请求将在设定的秒数内更新的资源。
每个Web开发人员需要掌握的HTTP缓存知识
max-stale指令通知缓存服务器客户端愿意接受过期资源并且过期时间不超过设定的秒数。
每个Web开发人员需要掌握的HTTP缓存知识
no-transform指令通知缓存服务器客户端不希望请求修改资源的任何版本的缓存。
最后一条指令only-if-cached通知缓存服务器客户端只需要缓存的响应,而不需要直接请求服务器获取缓存状态。如果缓存无法满足请求,则应返回504网关超时响应。
变化的头和服务器协商响应
我们要解释的最后一件事是浏览器如何识别缓存资源以及服务器如何协商。
浏览器缓存实际上只查看URL和方法。由于几乎所有可缓存的请求都是GET请求,因此浏览器可以通过URL识别资源。客户端服务器用于协商的HTTP头标识符,服务器通过Vary头将消息发送给客户端。例如,客户端发出以下请求:
每个Web开发人员需要掌握的HTTP缓存知识
Accept-Encoding标头指示Web服务器在服务器支持时使用gzip压缩和传输响应资源。服务器需要使用Vary头响应协商请求头,该头将其附加到其响应头的Vary头,如下图所示:每个Web开发人员需要掌握的HTTP缓存知识
因此,在缓存资源时,您不仅应使用URL的值来缓存响应,还应使用请求标头的Accept-Encoding值来进一步限定缓存的密钥。因此,使用不同Accept-Encoding标头(例如deflate)的请求将不会为其缓存提供gzip。
总结一下
缓存是增强Web服务和应用程序APP性能的一种非常强大的方法。本文旨在指导Web开发人员和相关代码农民了解HTTP缓存并将其用作学习的必要工具。如果您想要更深入的学习,可以参考MDN的文档。
每个Web开发人员需要掌握的HTTP缓存知识
IT外包
>
400-635-8089
立即
咨询
电话咨询
服务热线
400-635-8089
微信咨询
微信咨询
微信咨询
公众号
公众号
公众号
返回顶部