资讯专栏INFORMATION COLUMN

浅谈http协议(一):与缓存相关的头信息Etag、Last-Modified、Cache-Cont

FuisonDesign / 3399人阅读

摘要:协商缓存用户发送的请求,发送到服务器后,由服务器判定是否从缓存中获取资源。如果想主动清除缓存,也可以在请求头信息中加入来禁止缓存。主要取值如下缓存的时效由决定。是的字段,而是的字段,当与同时存在时,的优先级要高于。

在讲这几个属性之前,先复习下浏览器的缓存机制,再结合了解一下Last-Modified / If-Modified-Since、Etag / If-Match、cache-control / expires

浏览器缓存位置分为四种,其优先级顺序如下:
Service Worker、Memory Cache、Disk Cache、Push Cache,当上述四个缓存位置中的缓存都没有命中时,则会向服务器发起请求。
Service Worker: 不做了解;
Push Cache: 不做了解;
Memory Cache: 即内存中的缓存,其特点是容量小、读取高效、持续性短,会随着进程的释放而释放,在内存使用率低、缓存小尺寸资源时,会以 Memory Cache 为优先;
Disk Cache: 即磁盘中的缓存,其特点是容量大、读取缓慢、持续性长,任何资源都能存储到磁盘中,在内存使用率高、缓存大尺寸资源时,会以 Disk Cache 为优先;

浏览器缓存策略分为两种,强缓存和协商缓存:
强制缓存
用户发送的请求,直接从客户端缓存中获取,不发送请求到服务器,不与服务器发生交互行为。
协商缓存
用户发送的请求,发送到服务器后,由服务器判定是否从缓存中获取资源。

可用如下流程图来概括浏览器的缓存机制:

浏览器的缓存主要是针对静态资源进行缓存,如图片、文件、js等。

当用户发起请求时,浏览器先执行(a)步骤,查看是否有缓存,如果我们用的是谷歌浏览器,也可以在地址栏输入chrome://cache/查看你发起的请求链接是否在缓存列表中。如果想主动清除缓存,也可以在请求头信息中加入“Cache-Control: no-store”来禁止缓存。下次是缓存列表中打开的缓存:

如果浏览器中有缓存则执行(b)步骤,查看缓存是否过期,主要是通过缓存中存储的响应头信息中的缓存标识字段 Expires 或 Cache-Control 来验证缓存资源是否过期。Expires 是服务器端在响应请求时用来规定资源的失效时间。Cache-Control 是服务器端在响应请求时用来规定资源是否需要被浏览器缓存以及缓存的有效时间等。Cache-Control 主要取值如下:

缓存的时效由max-age决定。在max-age设定的时间内对当前资源发起访问后使用的都是浏览器内部的缓存!超过max-age设定的时间后浏览器会选择使用协商缓存。
响应头信息中的no-cahce,表示不使用强制缓存,直接进入协商缓存,请求头信息中的no-cache,则表示要重新获取请求,其作用类似于no-store,响应头信息的no-cache和max-age=0和请求头信息的max-age=0的作用是一样的:都要求在使用缓存之前进行验证。

Expires 是 HTTP 1.0 的字段,而 Cache-Control 是 HTTP 1.1 的字段,当 Expires 与 Cache-Control 同时存在时,Cache-Control 的优先级要高于 Expires。为了保证浏览器兼容,一般两个字段后端都会同时返回给前端,若是命中缓存(即存在缓存资源并且缓存资源未过期),则浏览器响应 HTTP Status Code 200,并直接使用缓存资源作为返回结果,不需要发起 HTTP 请求,为强制缓存;若是存在缓存资源但缓存资源已过期,则进入下一步骤协商缓存

(c)协商缓存相关的缓存标识字段是 Last-Modified 和 Etag。
Last-Modified 是服务器端在响应请求时用来说明资源的最后修改时间。与之对应的是 If-Modified-Since 字段,在协商缓存过程中,浏览器发送的 HTTP 请求中 Header 中会带上 If-Modified-Since 字段,值为缓存资源 Last-Modified 属性的值。
当服务器端接收到带有 If-Modified-Since 的请求时,则会将 If-Modified-Since 的值与被请求资源的最后修改时间做对比。如果相同,说明资源没有新的修改,则响应 HTTP Status Code 304,浏览器会继续使用缓存资源;如果最后修改时间比较新,则说明资源被修改过,则响应 HTTP Status Code 200,并返回最新的资源。

Etag 是服务器端在响应请求时用来说明资源在服务器端的唯一标识。与之对应的是 If-None-Match 字段,在协商缓存过程中,浏览器发送的 HTTP 请求中 Header 中会带上 If-None-Match 字段,值为该缓存资源 Etag 属性的值。
当服务器端接收到带有 If-None-Match 的请求时,则会将 If-None-Match 的值与被请求资源的唯一标识做对比。如果相同,说明资源没有新的修改,则响应 HTTP Status Code 304,浏览器会继续使用缓存资源;如果不同,则说明资源被修改过,则响应 HTTP Status Code 200,并返回最新的资源。

Last-Modified 是 HTTP 1.0 的字段,而 Etag 是 HTTP 1.1 的字段,当 Last-Modified 与 Etag 同时存在时,Etag 的优先级要高于 Last-Modified。Etag 的出现主要是为了解决 Last-Modified 存在的问题。

最后,最新请求下来的资源,浏览器会根据Expires 与 Cache-Control判断是否进行缓存。

<完>

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109914.html

相关文章

  • 浅谈http协议):缓存相关的头信息EtagLast-ModifiedCache-Cont

    摘要:协商缓存用户发送的请求,发送到服务器后,由服务器判定是否从缓存中获取资源。如果想主动清除缓存,也可以在请求头信息中加入来禁止缓存。主要取值如下缓存的时效由决定。是的字段,而是的字段,当与同时存在时,的优先级要高于。 在讲这几个属性之前,先复习下浏览器的缓存机制,再结合了解一下Last-Modified / If-Modified-Since、Etag / If-Match、cache-...

    Arno 评论0 收藏0
  • 浅谈浏览器缓存

    摘要:最近在项目中遇到了浏览器因缓存问题未能成功向后端发送类型请求的,然后顺藤摸瓜顺便看了看缓存的知识,觉得有必要总结一下。是服务器响应消息头字段,在响应请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。 最近在项目中遇到了IE浏览器因缓存问题未能成功向后端发送GET类型请求的bug,然后顺藤摸瓜顺便看了看缓存的知识,觉得有必要总结一下。 在前端开发中,性能一直都...

    godruoyi 评论0 收藏0
  • 浅谈浏览器缓存

    摘要:最近在项目中遇到了浏览器因缓存问题未能成功向后端发送类型请求的,然后顺藤摸瓜顺便看了看缓存的知识,觉得有必要总结一下。是服务器响应消息头字段,在响应请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。 最近在项目中遇到了IE浏览器因缓存问题未能成功向后端发送GET类型请求的bug,然后顺藤摸瓜顺便看了看缓存的知识,觉得有必要总结一下。 在前端开发中,性能一直都...

    shiina 评论0 收藏0
  • 漫谈Web缓存

    摘要:了解前端缓存是打造高性能网站的必要知识。这个表示,你的请求发送到后端,后端判断并认为资源可以继续使用,直接使用本地缓存。尽可能的设置久缓存时间,通过码来管理版本。参考链接浅谈缓存权威指南上配置缓存首发地址 背景说明 缓存一直是前端性能优化中,浓墨重彩的一笔。了解前端缓存是打造高性能网站的必要知识。 之前,对于缓存的认知一直停留在看《HTTP权威指南》和一些相关帖子的深度,过了一段时...

    davidac 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<