Cache-Control 常见字段
参考:https://blog.csdn.net/qq_41996454/article/details/108644436
-
Cache-Control 可以在请求头或者响应头中设置,并且可以组合使用多种指令
-
no-cache 和 no-store 用作控制缓存,被服务器通过响应头 Cache-Control 传递给客户端
-
Cache-Control的默认取值:private
指令 | 作用 |
---|---|
public | 表示响应可以被客户端和代理服务器缓存 |
private | 表示响应只可以被客户端缓存 |
max-age=30 | 缓存30秒后就过期,需要重新请求 |
s-maxage=30 | 覆盖max-age,作用一样,只在代理服务器中生效 |
no-store | 不缓存任何响应 |
no-cache | 资源被缓存,但是立即失效,下次会发起请求验证资源是否过期 |
max-stable | 30秒内,即使缓存过期,也使用该缓存 |
min-fresh | 希望在30秒内获取最新的相应 |
例如,当Cache-Control:max-age=300
时,则代表在这个请求正确返回时间(浏览器也会记录下来)的5分钟内再次加载资源,就会命中强缓存。
考察重点:no-store和no-cache。
no-store
永远都不要在客户端存储资源,永远都去原始服务器去获取资源。
用来防止缓存和重新使用敏感信息,比如一个需要登录的网站,在浏览器缓存页面时,将会存储用户的登录信息,可能会导致用户之后访问时自动登录,因此登录页面可以使用No-Store 响应头来防止浏览器缓存,以保证安全性。
no-cache
可以在客户端存储资源,每次都必须去服务端做新鲜度校验,来决定从服务端获取新的资源(200)还是使用客户端缓存(304)。也就是所谓的协商缓存。
使用场景:一般情况下对于 index.html 或者现代构建环境下不加 hash 的静态资源都需要设置 Cache-Control: no-cache,用来强制每次在服务器端的新鲜度校验,用来强制客户端每次访问都到服务端检查资源是否发生变化,比如一个拥有实时更新的新闻页面,可以使用 No-Cache 响应头来保证每次访问都可以获取到最新的新闻。相当于设置缓存头
Cache-Control: max-age=0, must-revalidate
注意:右边那条线路,直接命中缓存也是状态码200,面试常问问题。
用户行为对浏览器缓存的影响
用户行为对浏览器缓存的影响,指的就是用户在浏览器如何操作时,会触发怎样的缓存策略。主要有 3 种:
- 打开网页,地址栏输入地址: 查找 disk cache 中是否有匹配。如有则使用;如没有则发送网络请求。
- 普通刷新 (F5):因为 TAB 并没有关闭,因此 memory cache 是可用的,会被优先使用(如果匹配的话)。其次才是 disk cache。
- 强制刷新 (Ctrl + F5):浏览器不使用缓存,因此发送的请求头部均带有
Cache-control: no-cache
(为了兼容,还带了Pragma: no-cache
),服务器直接返回 200 和最新内容。
用户操作 | Expires/Cache-Control | Last-Modified/Etag |
---|---|---|
地址栏回车 | 有效 | 有效 |
页面链接跳转 | 有效 | 有效 |
新开窗口 | 有效 | 有效 |
前进、后退 | 有效 | 有效 |
F5刷新 | 无效 | 有效 |
Ctrl+F5刷新 | 无效 | 无效 |