最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

环球新消息丨【缓存】有关HTTP缓存的总结

来源：博客园

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

Expires是 HTTP/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-Since和ETag/If-None-Match这两对 Header 来控制。

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

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

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

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

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

Last-Modified、If-Modified-Since

Last-Modified与If-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-Control，Exipres（HTTP1.0）控制。浏览器直接读本地缓存，不会再跟服务器端交互，状态码 200。

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

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

参考文章

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

前端缓存最佳实践

图解 HTTP 缓存

HTTP 缓存

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

关键词： 发生改变 服务器端