【缓存】有关HTTP缓存的总结

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

HTTP 缓存

缓存的目的

主要作用是可以加快资源获取速度,提升用户体验,减少网络传输,缓解服务端的压力。

强缓存

不需要发送请求到服务端,直接读取浏览器本地缓存,显示的 HTTP 状态码是 200 ,强缓存又分为 Disk Cache (存放在硬盘中)和

Memory Cache (存放在内存中),存放的位置是由浏览器控制的。是否强缓存由 Expires、Cache-Control 和 Pragma 3 个 Header 属性共

同来控制。浏览器在向服务器发送http请求的时候,服务器会将缓存规则返给http响应报文的http头和请求结果一起返回给浏览器

Expires绝对时间

Expires: Wed, 22 Oct 2018 08:41:00 GMT

ExpiresHTTP/1 的产物,表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期,需要再次请求。并且 Expires 受限于本地时间,如果修改了本地时间,可能会造成缓存失效

Cache-control相对时间

max-age:单位是秒,缓存时间计算的方式是距离发起的时间的秒数,超过间隔的秒数缓存失效
no-cache:不使用强缓存,需要与服务器验证缓存是否新鲜
no-store:禁止使用缓存(包括协商缓存),每次都向服务器请求最新的资源
private:专用于个人的缓存,中间代理、CDN 等不能缓存此响应
public:响应可以被中间代理、CDN 等缓存
must-revalidate:在缓存过期前可以使用,过期后必须向服务器验证
Cache-control: max-age=30
  • Cache-Control 出现于 HTTP/1.1,优先级高于 Expires 。该属性值表示资源会在 30 秒后过期,需要再次请求。
  • Cache-Control 可以在请求头或者响应头中设置,并且可以组合使用多种指令
  • 置Cache-Control的值为“public, max-age=xxx”,表示在xxx秒内再次访问该资源,均使用本地的缓存,不再向服务器发起请求。

情况主要有三种

  • 1)不存在该缓存结果和缓存标识,强制缓存失效,则直接向服务器发起请求(跟第一次发起请求一致)

  • 2)协议中有这种缓存结果和缓存标识,但是结果已经失效,强制缓存失效,则使用协商缓存

  • 3)协议中存在缓存结果和缓存标识,且该结果尚未生效,强制缓存生效,直接返回该结果

强缓存缺点:

如果在xxx秒内,服务器上面的资源更新了,客户端在没有强制刷新的情况下,看到的内容还是旧的。如果发布新版本的时候,后台接口

也同步更新了,那就gg了。有缓存的用户还在使用旧接口,而那个接口已经被后台干掉了。怎么办?

协商缓存

当浏览器的强缓存失效的时候或者请求头中设置了不走强缓存,并且在请求头中设置了If-Modified-Since 或者 If-None-Match 的时候,会

将这两个属性值到服务端去验证是否命中协商缓存,如果命中了协商缓存,会返回 304 状态通知浏览器从缓存中读取资源,并且响应头会

设置 Last-Modified 或者 Etag 属性。

协商缓存可以通过 Last-Modified/If-Modified-SinceETag/If-None-Match这两对 Header 来控制。

Last-Modified 与If-Modified-Since都是用来记录页面的最后修改时间。当客户端访问页面时,服务器会将页面最后修改时间通过 Last-

Modified 标识由服务器发往客户端,客户端记录修改时间,再次请求本地存在的cache页面时,客户端会通过 If-Modified-Since 头将先前

服务器端发过来的最后修改时间戳发送回去,服务器端通过这个时间戳判断客户端的页面是否是最新的,如果不是最新的,则返回新的内

容,如果是最新的,则 返回 304 告诉客户端其本地 cache 的页面是最新的,于是客户端就可以直接从本地加载页面了,这样在网络上传

输的数据就会大大减少,同时也减轻了服务器的负担。

Last-Modified、If-Modified-Since

Last-ModifiedIf-Modified-Since 的值都是 GMT 格式的时间字符串,代表的是文件的最后修改时间。

  1. 在服务器在响应请求时,会通过Last-Modified告诉浏览器资源的最后修改时间。

  2. 浏览器再次请求服务器的时候,请求头会包含If-Modified-Since字段,后面跟着在缓存中获得的最后修改时间。

  3. 服务端收到此请求头发现有if-Modified-Since,则与被请求资源的最后修改时间进行对比,如果一致则返回 304 和响应报文头,浏

    览器只需要从缓存中获取信息即可。如果已经修改,那么开始传输响应一个整体,服务器返回:200 OK

但是在服务器上经常会出现这种情况,一个资源被修改了,但其实际内容根本没发生改变,会因为Last-Modified时间匹配不上而返回了

整个实体给客户端(即使客户端缓存里有个一模一样的资源)。为了解决这个问题,HTTP/1.1 推出了Etag。Etag 优先级高与Last-

Modified

Etag、If-None-Match

Last-Modified的缺点

 1. 最小单位是秒。也就是说如果我短时间内资源发生了改变,Last-Modified 并不会发生变化;

 2. 周期性变化。如果这个资源在一个周期内修改回原来的样子了,我们认为文件是没有变化的是可以使用缓存的,但是 Last-Modified 记录的是上次修改时间,即使文件没有变化,但修改时间变了,所以它认为缓存失效

Etag

为了解决Last-modifed不准确的问题,后面引入了 Etag 。

Etag 一般是由文件内容 hash 生成的,也就是说它可以保证资源的唯一性,资源发生改变就会导致 Etag 发生改变。

同样地,在浏览器第一次请求资源时,服务器会返回一个 Etag 标识。当再次请求该资源时, 会通过 If-no-match 字段将 Etag 发送回服务

器,然后服务器进行比较,如果相等,则返回 304 表示未修改。

1)协商缓存生效,返回304,

2)协商缓存失效,返回200和请求结果结果

强缓存和协商缓存区别

是否需要向服务器发送请求验证本地缓存是否依旧有效。协商缓存,就是需要和服务器进行协商,最终确定是否使用本地缓存。

总结

通过前文,我们了解到 HTTP 缓存主要分:

  • 强制缓存
  • 协商缓存。

强制缓存由 Cache-ControlExipres(HTTP1.0)控制。浏览器直接读本地缓存,不会再跟服务器端交互,状态码 200。

协商缓存由 Last-Modified / If-Modified-SinceEtag /If-None-Match实现,每次请求需要让服务器判断一下资源是否更新过,从而

决定浏览器是否使用缓存,如果是,则返回 304,否则重新完整响应。

image

参考文章

web前端面试前端缓存的方式

前端缓存最佳实践

图解 HTTP 缓存

HTTP 缓存

深入理解浏览器的缓存机制

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

“【缓存】有关HTTP缓存的总结” 的相关文章