什么是 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 点过期。
需要注意的是,如果同时设置了 Expires
和 Cache-Control
,并且 Cache-Control
中包含 max-age
或者 no-cache
,那么 Expires
将会被忽略。如果只设置了 public
或者 private
,那么 Expires
依然生效。
服务器校验客户端缓存是否有效
Response headers
:Last-Modified
和ETag
Request headers
:If-Modified-Since
和If-None-Match
如果文件内容一样,但是最后修改时间变了,ETag
不一会变,这和服务器怎么去生成 ETag
有关。
NGINX 默认的 ETag
由 last-modified
和 content-length
组成,而 last-modified
又由 mtime
(文件内容的修改时间) 组成,源码部分 (opens in a new tab)。
如果 response headers 不设置 Cache-Control
或者 Expires
在 HTTP 缓存 - HTTP | MDN (opens in a new tab)有说到:
- 如果
max-age
和expires
都没有设置,那么会去找 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)