web 缓存是一种保存 Web 资源副本并在下次请求时直接使用该副本的技术.
Web 缓存可以分为这几种:浏览器缓存,CDN 缓存,服务器缓存,数据库数据缓存 .因为可能会直接使用副本免于重新发送请求或者仅仅确认资源没变无需重新传输资源实体,Web 缓存可以减少延迟加快网页打开速度,重复利用资源减少网络带宽消耗,降低请求次数或者减少传输内容从而减轻服务器压力.
这篇文章主要讨论和前端密切相关的浏览器 HTTP 缓存机制.浏览器 HTTP 缓存可以分为强缓存和协商缓存.强缓存和协商缓存最大也是最根本的区别是:强缓存命中的话不会发请求到服务器(比如 chrome 中的 200 from memory cache),协商缓存一定会发请求到服务器,通过资源的请求首部字段验证资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回,但是不会返回这个资源的实体,而是通知客户端可以从缓存中加载这个资源(304 not modified).简略流程图如下:
浏览器 HTTP 缓存由 HTTP 报文的首部字段决定
控制强缓存的字段按优先级介绍
Pragma Pragma 是 HTTP/1.1 之前版本遗留的通用首部字段,仅作为于 HTTP/1.0 的向后兼容而使用.虽然它是一个通用首部,但是它在响应报文中时的行为没有规范,依赖于浏览器的实现.RFC 中该字段只有 no-cache 一个可选值,会通知浏览器不直接使用缓存,要求向服务器发请求校验新鲜度.因为它优先级最高,当存在时一定不会命中强缓存.
Cache-Control Cache-Control 是一个通用首部字段,也是 HTTP/1.1 控制浏览器缓存的主流字段.和浏览器缓存相关的是如下几个响应指令:
指令 | 参数 | 说明 |
---|---|---|
private | 无 | 表明响应只能被单个用户缓存,不能作为共享缓存(即代理服务器不能缓存它) |
public | 可省略 | 表明响应可以被任何对象(包括:发送请求的客户端,代理服务器,等等)缓存 |
no-cache | 可省略 | 缓存前必需确认其有效性 |
no-store | 无 | 不缓存请求或响应的任何内容 |
max-age=[s] | 必需 | 响应的最大值 |
max-age(单位为 s)设置缓存的存在时间,相对于发送请求的时间.只有响应报文首部设置 Cache-Control 为非 0 的 max-age 或者设置了大于请求日期的 Expires(下文会讲)才有可能命中强缓存.当满足这个条件,同时响应报文首部中 Cache-Control 不存在 no-cache,no-store 且请求报文首部不存在 Pragma 字段,才会真正命中强缓存.以下所有图片均为刷新(command+R)的截图.
no-cache 表示请求必须先与服务器确认缓存的有效性,如果有效才能使用缓存(协商缓存),无论是响应报文首部还是请求报文首部出现这个字段均一定不会命中强缓存.Chrome 硬性重新加载(Command+shift+R)会在请求的首部加上 Pragma:no-cache 和
Cache-Control:no-cache
.
no-store 表示禁止浏览器以及所有中间缓存存储任何版本的返回响应,一定不会出现强缓存和协商缓存,适合个人隐私数据或者经济类数据.
public 表明响应可以被浏览器,CDN 等等缓存.
private 响应只作为私有的缓存,不能被 CDN 等缓存.如果要求 HTTP 认证,响应会自动设置为 private.
Expires Expires 是一个响应首部字段,它指定了一个日期 / 时间,在这个时间 / 日期之前,HTTP 缓存被认为是有效的.无效的日期比如 0,表示这个资源已经过期了.如果同时设置了 Cache-Control 响应首部字段的 max-age,则 Expires 会被忽略.它也是 HTTP/1.1 之前版本遗留的通用首部字段,仅作为于 HTTP/1.0 的向后兼容而使用.
控制协商缓存的字段
Last-Modified/If-Modified-Since If-Modified-Since 是一个请求首部字段,并且只能用在 GET 或者 HEAD 请求中.Last-Modified 是一个响应首部字段,包含服务器认定的资源作出修改的日期及时间.当带着 If-Modified-Since 头访问服务器请求资源时,服务器会检查 Last-Modified,如果 Last-Modified 的时间早于或等于 If-Modified-Since 则会返回一个不带主体的
304
响应,否则将重新返回资源.
If-Modified-Since: , :: GMT Last-Modified: , :: GMT
ETag/If-None-Match ETag 是一个响应首部字段,它是根据实体内容生成的一段 hash 字符串,标识资源的状态,由服务端产生.If-None-Match 是一个条件式的请求首部.如果请求资源时在请求首部加上这个字段,值为之前服务器端返回的资源上的 ETag,则当且仅当服务器上没有任何资源的 ETag 属性值与这个首部中列出的时候,服务器才会返回带有所请求资源实体的 200 响应,否则服务器会返回不带实体的
304
响应.ETag 优先级比 Last-Modified 高,同时存在时会以 ETag 为准.
If-None-Match: <etag_value> If-None-Match: <etag_value>, <etag_value>, ... If-None-Match: *
ETag 属性之间的比较采用的是弱比较算法,即两个文件除了每个比特都相同外,内容一致也可以认为是相同的.例如,如果两个页面仅仅在页脚的生成时间有所不同,就可以认为二者是相同的.
因为 ETag 的特性,所以相较于 Last-Modified 有一些优势:
. 某些情况下服务器无法获取资源的最后修改时间
. 资源的最后修改时间变了但是内容没变,使用ETag可以正确缓存
. 如果资源修改非常频繁,在秒以下的时间进行修改,Last-Modified只能精确到秒
整体流程
来源: https://juejin.im/post/5a673af06fb9a01c927ed880