前端
network
HTTP缓存

什么是 HTTP 缓存

HTTP 缓存是指客户端请求资源(比如图片、js、css 文件等)时,将资源缓存在客户端或者客户端到服务端的中间节点的一种技术。

HTTP 缓存的好处

客户端:减少重复的网络请求,访问更快,提升用户体验。 服务端:减轻了带宽压力和服务器请求数量,节省了服务器资源。

HTTP 缓存的配置

Cache-Control

缓存策略的配置:

  • no-store:不允许缓存
  • max-age=xxx:允许缓存,多少秒后缓存失效,会返回 200 状态码。
  • no-cache:允许缓存,但是每次都会向服务端发送请求,询问资源是否有更新,如果有更新,会返回最新的资源 (200 状态码),如果没有更新,会返回 304 状态码,告诉客户端使用缓存,max-age=0 的效果和 no-cache 一样。

缓存地点的配置:

  • public:客户端和中间节点均可缓存
  • private:只允许客户端缓存,中间节点不允许缓存

比如 Cache-Control: public, max-age=3600,表示允许客户端和中间节点缓存,缓存时间为 3600 秒。

Expires

Expires 表示资源过期时间,是一个绝对时间,比如 Expires: Thu, 01 Dec 1994 16:00:00 GMT,表示资源在 1994 年 12 月 1 日 16 点过期。

需要注意的是,如果同时设置了 ExpiresCache-Control,并且 Cache-Control 中包含 max-age 或者 no-cache,那么 Expires 将会被忽略。如果只设置了 public 或者 private,那么 Expires 依然生效。

服务器校验客户端缓存是否有效

  • Response headersLast-ModifiedETag
  • Request headersIf-Modified-SinceIf-None-Match

如果文件内容一样,但是最后修改时间变了,ETag 不一会变,这和服务器怎么去生成 ETag 有关。

NGINX 默认的 ETaglast-modifiedcontent-length 组成,而 last-modified 又由 mtime (文件内容的修改时间) 组成,源码部分 (opens in a new tab)

如果 response headers 不设置 Cache-Control 或者 Expires

HTTP 缓存 - HTTP | MDN (opens in a new tab)有说到:

  • 如果 max-ageexpires 都没有设置,那么会去找 headers 里的 Last-Modified 信息。
  • 如果有,缓存的寿命就等于 headers 里的 Date 的值减去 Last-Modified 的值除以 10。

也就是说即使你没有设置缓存,浏览器还是会根据文件的最后修改时间来决定缓存有效时间。

参考

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching (opens in a new tab)

https://juejin.cn/post/6844904019530350606 (opens in a new tab)