Http缓存

86 阅读2分钟

Http缓存

什么是缓存: 把一些不需要重新获取的内容再重新获取一次。

为什么需要缓存? 网络请求相比于CPU的计算和页面渲染是非常非常慢的。

那些资源可以被缓存? 静态资源,比如js、css、img。

Http缓存策略分为强制缓存协商缓存,刷新操作方式对缓存有影响。

1、强制缓存

image.png

Cache-Control:

  • 在Response Headers中。
  • 控制强制缓存的逻辑。
  • 例如Cache-Control:max-age=3153600(单位是秒)。

Cache-Control有哪些值:

  • max-age:缓存最大过期时间。
  • no-cache:可以在客户端存储资源,每次都必须去服务端做新鲜度校验,来决定从服务端获取新的资源(200)还是使用客户端缓存(304);
  • no-store:永远不要在客户端存储资源,永远都去原始服务器获取资源。

2、协商缓存(对比缓存)

  • 服务端缓存策略。
  • 服务端判断客户端资源,是否和服务端资源一样。
  • 一致则返回304,否则返回200和最新的资源。
image.png

资源标识:

  • 在Response Headers中,有两种。
  • Last-Modified:资源的最后修改时间。
  • Etag:资源的唯一标识(一个字符串,类似于人类的指纹)。

Last-Modified: image.png

服务器拿到if-modified-Since之后那这个时间去和服务端资源的最后修改时间对比,如果一致则返回304,不一致(也就是资源已经更新了)就返回200和新的资源及新的Last-Modified。

Etag:

image.png Etag和Last-Modified一样的,只不过Etag是服务端对资源按照一定的方式计算出来的唯一标识,就像指纹一样,传给客户端之后,客户端再回传时,服务端会将其与现在的资源计算出来的唯一标识作比较,一致则返回304,不一致则返回200和新的资源及新的Etag。

两者对比:

  • 优先使用Etag
  • Last-modified 只能精确到秒级
  • 如果资源被重复生成,而内容不变,则Etag更精确。

3、三种刷新操作对Http缓存的影响

  • 正常操作: 地址栏输入url,跳转链接,前进后退等。
  • 手动刷新:F5,点击刷新按钮,右键菜单刷新。
  • 强制刷新:ctrl+f5, shift+command+r。

正常操作:强制缓存有效,协商缓存有效。手动刷新:强制缓存失效,协商缓存有效。强制刷新:强制缓存失效,协商缓存失效。

综述:

image.png