HTTP缓存

最新推荐文章于 2024-03-24 16:51:39 发布
最新推荐文章于 2024-03-24 16:51:39 发布
阅读量325 收藏
点赞数
分类专栏： web前端 文章标签： HTTP缓存 Cache-Control no-cache Etag If-Modified-Since
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luofeng457/article/details/90373977
版权
Cache-Control

Cache-Control是HTTP1.1中引入的一种通用头部字段，可以用于请求和响应头部；现代浏览器都支持Cache-Control，主要用于替代HTTP1.0中定义的一些相应缓存标头，如Expires、Pragma等；客户端和服务端的请求头有一些差异：

指令客户端服务端
no-cache√√
no-store√√
max-age=<seconds>√√
no-transform√√
public×√
private×√
max-stale√×
only-if-cached√×
must-revalidate×√
proxy-revalidate×√
s-maxage=<seconds>×√

  1. no-cache和no-store：
    no-store禁止浏览器及所有的中间件（代理服务器等）缓存任何版本的响应信息，即我们通常所说的不缓存，每次请求都需要向服务器发送完整地请求并下载相应的响应；

    no-cache不直接使用缓存，需要先在与服务器确认返回的响应是否发生变化。即如果存在ETag（如ETag: af47a1d）等验证令牌时，会发送请求（请求带着If-None-Match: af47a1d标头）到服务器检验之前的缓存内容和当前版本有无变化，如果无变化则返回响应状态码304，否则重新请求并下载资源；

  2. public与private：
    private：响应仅对单个用户进行缓存，也就是说对于代理服务器、CDN等中间缓存机构不进行缓存；
    public：非必须项，表示响应在多数情况下均可以被缓存（包括CDN、代理服务器等）；

  3. only-if-cached：客户端标头，表示客户端仅接受已缓存的响应，并且不会检测当前响应的新鲜度。

  4. max-age: <seconds>：从请求时间开始计算的缓存存储的最大有效时长，单位为秒；超过则为过期；

  5. max-stale[=<seconds>]：客户端标头，表示客户端可以接受一个过期资源；如果设置了可选的时间参数，则表示过期时间不超过该时长；

  6. must-revalidate：服务端标头，使用缓存前需要验证旧资源的状态，过期资源不可用；

  7. proxy-revalidate：服务端标头，仅适用于共享缓存（如代理等），作用与上类似；

// 禁止缓存
Cache-Control: no-cache, no-store, must-revalidate	

// 缓存静态文件
Cache-Control: public, max-age=31536000

下图是MDN推荐的最佳Cache-Control策略：

在这里插入图片描述

Pragma

Pragma是HTTP1.0中定义的通用首部字段，与HTTP1.0中的Expires标头共同决定HTTP1.0中的缓存策略；Pragma: no-cache作用与Cache-Control: no-cache作用一致；现在通常用与对HTTP1.0客户端的兼容；

Expires

Expires是HTTP1.0及HTTP1.1都有的响应头部字段，表示启用缓存并设置资源过期的时间点，包含日期、时间；设置过去的时间则表示资源过期；同时设置Pragma和Expires则不缓存；这里需要注意的是服务器时间和本地时间的统一问题，否则可能导致合法的资源被当做过期处理，在项目中已采坑。。

如果响应头部中包含Cache-Control：max-age或Cache-Control：s-max-age字段，则Expires字段会被忽略；

// 示例
Expires: Wed, 21 Oct 2015 07:28:00 GMT

缓存校验机制

如果由于服务器时间精度问题；或者如果设置的缓存时间已经过期，并且服务端资源并未发生更新，仅使用max-age等类似的缓存过期判断策略，会重新下载整个并未发生变化的资源，这会造成带宽浪费与服务器负载压力；

Last-Modified与If-Modified-Since
  1. Last-Modified：响应头部字段；表示服务器端资源上次修改的日期和时间，通常与请求字段If-Modified-Since搭配使用；其精度低于ETag，故常作为备用机制；
    // 用法
Last-Modified: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT

// 示例
Last-Modified: Wed, 20 May 2019 11:11:11 GMT
  2. If-Modified-Since：请求字段（GET/HEAD方式），如果请求的资源在给定时间后未被修改，那么返回一个不带响应主体的304响应；否则是一个200的请求；同样，如果同时设置了If-None-Match，If-Modified-Since也会被忽略；
    // 示例
If-Modified-Since: Wed, 20 May 2019 11:11:11 GMT
ETag与If-None-Match

Last-Modified的精度与服务器的时间精度有关，无法识别一秒内进行多次修改的情况，也就是说资源的修改时间有可能存在一定偏差，而ETag可以精确标识资源的改动；另外，如果资源修改而其内容未发生变化（修改后再恢复）的情况下还是会重新加载资源；

  1. ETag相当于资源的摘要，值是一段ASCII码组成的字符串，仅在其内容发生变化时对应的ETag值才会改变；这样就可以避免Last-Modified中资源被修改而内容未发生变化的状况了；ETag的生成方式不唯一；

    服务器响应资源请求时，可以在响应头部加上ETag指令，如ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"，客户端可以选择是否缓存该资源及标识并且在下次请求该资源时在请求头中加入一个If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"的头部字段；服务器将当前版本的ETag与客户端的ETag字段值进行比较，如果两者保持一致则表示资源未被更改，返回304；

    需要注意的是，上边已经提到了ETag生成的方式不唯一，可以通过hash散列或者其他算法获得；因此在使用CDN或者其他分布式服务器系统时，需要保障ETag的唯一性，从而避免不必要的资源请求；当然，计算ETag对服务器性能也有一定的影响；

    W/为可选参数，用于标识是否为弱校验；ETag支持强校验和弱校验：强校验需要资源每个字节都对应相同，包括Content-Type、Content-Encoding等；弱校验仅需二者在语义上相同，即可以使用不同的Content-Type值等，尤其是在动态生成内容上弱校验更能发挥作用；

    // 示例
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
ETag: W/"0815"
F5与Ctrl+F5

Ctrl+F5会强制不用所有缓存并全部向服务器发送新的请求，请求头中移除了If-Modified-Since及If-none-Match标头，并且加入Cache-Control: no-cache及Pragma: no-cache；

F5则会加入请求头If-Modified-Since、If-none-Match及Cache-Control: max-age=0请求头以有效使用缓存；

文献5的图更形象地表明了客户端状态码与请求头部的关系：
在这里插入图片描述

结合上图，为了更高效地利用HTTP缓存，应当尽量为可缓存资源设置Expires/Cache-Control及ETag/Last-Modified标头，这样可以能减少304请求造成的性能开销，同时能在资源更新的时候尽可能早的获取新版本的资源，从而使用户体验更好；现在，使用webpack构建项目时，通常会将静态资源的文件名后缀加上md5等，这样可以在资源有新版本时直接更新资源，减少304的开销；

强缓存与协商缓存
  1. 强缓存：由expires与cache-control: max-age控制；表示在缓存有效期内不需要重新请求服务端资源，返回的状态码为200；
  2. 协商缓存：由ETags与If-No-Match、Last-Modified与If-Modified-Since控制；在缓存过期时，会用到协商缓存；协商缓存需要向浏览器发送请求，以确认当前过期的资源是否发生过更新，如果没有更新，即缓存有效则返回304；否则重新获取资源；

参考文献：
3. https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control
4. https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching_FAQ
5. https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn
6. https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Pragma
7. https://imweb.io/topic/5795dcb6fb312541492eda8c
8. https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Last-Modified
9. https://zh.wikipedia.org/wiki/HTTP_ETag

Neil-
关注
专栏目录
十、HTTP 缓存——HTTP 缓存与HttpClient客户端缓存
流楚丶格念的博客
08-25 653
在日常开发中，浏览器缓存是一个非常常见但又容易被忽视的优化手段。许多开发者在面对浏览器缓存相关问题时可能会感到困惑，因此本章内容专门用来解答这些常见问题，并帮助你更好地理解如何在 Java 应用中控制浏览器缓存。浏览器缓存是指在用户使用浏览器访问网站页面或 HTTP 服务时，根据服务器端返回的缓存控制响应头，将响应内容缓存到本地浏览器。这样，下次访问相同资源时，浏览器可以直接使用缓存内容，或者仅与服务器验证内容是否过期，从而减少网络传输的数据量，提升网站性能。public。
十、HTTP 缓存——Nginx HTTP 缓存
最新发布
流楚丶格念的博客
08-25 665
时间为 2024年8月16日 11:00:00，Nginx 将返回 304 状态码，因为资源的最后修改时间早于客户端的请求时间。：对于不常变化的异步数据（如商品详情页的评论），可以考虑设置较长时间的缓存（如 1 个月）。：对于静态资源（如 JS、CSS、图片），可以设置较长时间的缓存（如 1 个月或 1 年），通过版本号控制缓存过期。：对于不需要强一致性的页面（如商品详情页的库存信息），可以设置较短的缓存时间。通过这种配置，你可以灵活地管理 Nginx 的缓存内容，确保缓存的有效性和更新的及时性。
设置html 头 缓存,html头文件设置常用之<meta>设置缓存
weixin_40005542的博客
06-29 438
,pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.),常见的取值有private、no-cache、max-age、must-revalidate等，默认为private,其作用根据不同的重新浏览方式分为以下几种情况：1) 打开新窗口 值为private、no-cache、m...
HTTP之缓存
qq_40276626的博客
09-20 381
缓存出现原因 查询和缓存总是配套出现，HTTP的GET请求也是一种查询，是客户端通过HTTP向服务器查询资源，为了减少不必要的查询，也为了降低网络负担，HTTP也引入了缓存。 缓存的Key就是URL，Value就是对应的回应Body。 缓存详解 当浏览器第一次请求一个URL的时候，服务器的响应头中有一个Cache-Control字段中记录了max-age，指的是缓存的有效时间。 缓存是由Cache-Control字段来控制的，注意只有客户端的请求头中的Cache-Control才能控制是否使用缓存。 1、
HTTP协议之缓存控制:no-cache/must-revalidate/no-store
样young的博客
09-05 1万+
本文转自：http://hyj1254.iteye.com/blog/1165387 客户端从服务器请求数据需要经历如下基本步骤:         1、如果请求命中本地缓存则从本地缓存中获取一个对应资源的"copy"；         2、检查这个"copy"是否fresh,是则直接返回，否则继续向服务器转发请求。         3、服务器接收到请求，然后判断资源是否变更，是则返回新内容，否...
http协议-缓存控制：no-cache/must-revalidate/no-store
com185272358的专栏
06-20 4405
客户端从服务器请求数据经历如下基本步骤:   1、如果请求命中本地缓存则从本地缓存中获取一个对应资源的"copy"；   2、检查这个"copy"是否fresh,是则直接返回，否则继续向服务器转发请求。   3、服务器接收到请求，然后判断资源是否变更，是则返回新内容，否则返回304，未变更。   4、客户端更新本地缓存。   no-cache的作用是：强制客户端跳过步骤2，直接向服务器发
前端页面缓存的问题
m0_63853518的博客
08-24 2892
前端页面缓存的问题
<meta http-equiv="pragma" content="no-cache">属性http-equiv功能介绍
qq_25600055的专栏
09-09 1995
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。  meat标签的http-equiv属性语法格式是：＜meta http-equiv=”参数” content=”参数变量值”＞ ；其中http-equiv属性主要有以下几种参数： A、
Go-pike是HTTP缓存服务提供高效简单的HTTP缓存服务
08-13
Go-pike是一个基于Go语言开发的HTTP缓存服务，它为用户提供了一种高效且简洁的解决方案，以替代传统的HTTP缓存工具如Varnish。Varnish以其出色的性能和强大的VCL（Varnish Configuration Language）配置而闻名，但在...
http缓存.pptx
08-13
http缓存详解ppt原创 1. 缓存的类型 2. http缓存详解 •http请求流程 •缓存操作的目标 •缓存控制 •缓存验证 •新鲜度 •vary响应 3. http缓存的应用及意义 4. 关于http缓存的一些问题
“Cache-control”常见的取值有private、no-cache、max-age、must-revalidate等
weixin_30686845的博客
05-04 703
网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。其作用根据不同的重新浏览方式分为以下几种情况： （1） 打开新窗口 如果指定cache-control的值为private、no-cache、must-revalidate，那么打开新窗口访问时都...
可能是最被误用的 HTTP 响应头之一 Cache-Control: must-revalidate
零度源码
05-06 4898
作者：阿里妈妈@紫云飞链接：https://zhuanlan.zhihu.com/p/60357719（点击尾部阅读原文前往）本文首发于阿里妈妈前端快爆在 HTTP 客户...
运维-服务器缓存之varnish
01-06 232
varnish 小草新blog: http://homeway.me/ 一、介绍下吧： 首先了解几个概念， 1. Varnish不缓存带有Set-Cookie头的http输出。 2. 对于HTTP协议中缓存部分，Varnish遵从http协议部分。如：带有如下头信息，Control-Cache: no-store, no-cache, must-revalidate, p
Http响应头里Cache-Control：no-cache、max-age=""和no-store
热门推荐
在路上
09-03 3万+
响应头：Cache-Control：no-cache，强制每次请求直接发送给源服务器，而不经过本地缓存版本的校验。这对于需要确认认证应用很有用（可以和public结合使用），或者严格要求使用最新数据 的应用（不惜牺牲使用缓存的所有好处） 通俗解释：浏览器通知服务器，本地没有缓存数据 //======================================================...
web性能优化之：no-cache与must-revalidate深入探究
weixin_34341117的博客
08-01 281
引言 稍微了解HTTP协议的前端同学，相比对Cache-Control不会感到陌生，性能优化时经常都会跟它打交道。 常见的值有有private、public、no-store、no-cache、must-revalidate、max-age等。 各个取值所代表的含义，网上总结挺多的，这里就不打算再进行逐一介绍，感兴趣的可以一起探讨交流。 本文仅挑no-c...
Nginx下关于缓存控制字段cache-control的配置说明
eshine Lau 的博客
03-24 2915
HTTP协议的Cache -Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置 Cache-Control并不会影响另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括: no-cache、no-store、max-age、 max-stale、min-fresh、only-if-cached等。
请求头Cache-Control: no-cache,Cache-Control: no-store,Pragma: no-cache区别
牧xin的博客
04-22 8481
Cache-Control: no-cache：这个很容易让人产生误解，使人误以为是响应不被缓存。实际上Cache-Control: no-cache是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。 Cache-Control: no-store：这个才是响应不被缓存的意思。 Pragma: no-cache：跟Cache-Control: no-...
cache control 里 no-cache 和 no-store 的区别
汪子熙的专家技术分享
08-31 4560
no-cache 并不意味着不缓存。 事实上，这意味着在对每个请求使用您可能拥有的任何缓存响应之前“使用服务器重新验证”。 另一方面，must-revalidate 只需要在资源被认为陈旧时重新验证。 如果服务器说资源仍然有效，那么缓存可以用它的表示进行响应，从而减轻服务器重新发送整个资源的需要。 no-store 实际上是完整的不缓存指令，旨在防止以任何形式的缓存存储表示。 no-store 指令的目的是防止无意中释放或保留敏感信息（例如，在备份磁带上）。 no-store 指令适用于整个消息，可以在响应
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Neil-

你们的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值