腾讯DeepOcean原创文章:http://dopro.io/http-cache-and-cdn-cache.html
配置http缓存与cdn缓存一直以来都是web性能优化中重要而常见的手段。合理的http缓存与cdn缓存配置可以起到减轻伺服器压力,缓解网路瓶颈,提升用户体验等作用,不当的缓存配置却会导致资源无法及时更新,用户体验差异,甚至流程出错等问题。本文主要讲解http缓存与cdn缓存的原理和配置规则,希望通过本文的讲解能够让大家清楚什么是合理的缓存配置,如何为自己的项目定制化缓存方案,以及如果碰到缓存问题,应该如何分析解决。
首先,让我们来看这样一个场景
项目A上线了一个新特性,包含著逻辑的改动和页面UI的更新,小明作为项目开发将代码提交后进行了预发布。产品经理小红开始体验新特性,奇怪的是,小红进入项目后却并没有看到最新的特性,这时小明思考了一会说,小红你点击刷新再试试,果然,刷新后项目有了变化,新特性出来了,但是这时又有了新的问题,项目里的图片似乎还是旧图,小明又思考了一会,随后在电脑前捣鼓一番,让小红再次体验,终于,这个时候特性完整验收通过。上述的案例中,其实就包含著http缓存和cdn缓存的应用,当然,这是一个反面教材,实际上线过程中,我们不可能让每一个用户点击刷新来体验我们的新特性,那应该如何解决上述问题呢,接下来上干货。
http缓存
简介
http缓存是客户端缓存,浏览器作为客户端接受到服务端响应后,对于响应首部栏位进行解析,分析出相应的缓存规则,将资源按规则进行缓存,再次请求时如果命中缓存则直接读取本地缓存不再发出请求。
缓存规则
http缓存规则由响应首部栏位进行控制,其中的关键栏位有Expires,Cache-Control ,Last-Modified ,Etag 四个栏位,Expires和Cache-Control用来确定确定缓存的存储时间,Last-Modified 和Etag则用来确定缓存是否要被更新,我们简单来看一下区别。
- expires: HTTP1.0中用来控制缓存时间的参数,响应头包含日期/时间, 即在此时间之后,响应过期。
- cache-control: HTTP1.1中用来控制缓存时间的参数
- public: 表明响应可以被任何对象(包括:发送请求的客户端,代理伺服器,等等)缓存。
- private: 表明响应只能被单个用户缓存,不能作为共享缓存(即代理伺服器不能缓存它)。
- max-age=<seconds>: 设置缓存存储的最大周期,相对于请求的时间缓存seconds秒,在此时间内,访问资源直接读取本地缓存,不向伺服器发出请求。(与expires同时出现时,max-age优先顺序更高)
- s-maxage=<seconds>: 规则等同max-age,覆盖max-age 或者 Expires 头,但是仅适用于共享缓存(比如各个代理),并且私有缓存中它被忽略。(与expires或max-age同时出现时,s-maxage优先顺序更高)
- no-store: 不缓存伺服器响应的任何内容,每次访问资源都需要伺服器完整响应
- no-cache: 缓存资源,但立即过期,每次请求都需要跟伺服器对比验证资源是否被修改。(等同于max-age=0)
- Last-modified: 源头伺服器认定的资源做出修改的日期及时间。精确度比Etag低。包含有If-Modified-Since或 If-Unmodified-Since首部的条件请求会使用这个栏位。
- Etag: HTTP响应头是资源的特定版本的标识符。
我们通过chrome控制台可以很轻松的找到一个案例: