HTTP缓存是在服务端进行设置的,分为强缓存和协商缓存两种。强缓存优先级更高,在强缓存命中失败(未设置强缓存或缓存数据过期)后才会检索协商缓存。强缓存和协商缓存设置都是用来判断是否启用缓存数据的,它们不涉及到缓存处理
强缓存
强缓存是利用http头中的Expires和Cache-Control两个字段来控制的,强缓存中,当请求发出时,浏览器会根据其中的 Expires 和 Cache-Control 判断目标资源是否“命中”强缓存,若命中则直接从缓存中获取资源,不会再与服务端发生通信。
命中强缓存的情况下,返回的HTTP状态码为200(括号里会写缓存在disk还是memory)
-
Expires
-
expires 是一个时间戳(单位为ms)
-
时间戳是服务器来定义的
-
本地时间的取值来自客户端
-
服务器与客户端存在时间差?
示例:
const t = new Date(Date.now() + 60 * 1000).toUTCString()
ctx.set('expires', t)
浏览器中请求出现下面属性
-
Cache-Control
-
通过 max-age 控制资源有效期(单位为s)
-
max-age 是一个时间长度
-
public 与 private (能否够被代理服务缓存)
-
no-cache 与 no-store(向服务端协商 / 发送请求)
示例:
ctx.set('Cache-Control', 'max-age=60')
浏览器中请求出现下面属性
cache-Control 值 | 解释 |
---|---|
max-age=86400 | 响应可以被浏览器和中间缓存缓存最多 1 天(60 秒 x 60分钟 x 24 小时) |
private, max-age=600 | 响应可以被浏览器(但不是中间缓存)缓存最多 10 分钟(60 秒 x 10 分钟) |
public, max-age=31536000 | 响应可以由任何缓存存储 1 年 |
no-store | 不允许缓存响应,必须在每次请求时完整获取 |
Cache-Control 的 max-age 配置项相对于 expires 的优先级更高,当二者同时出现时,以 Cache-Control 为准。
强缓存虽好,但如果服务器数据进行了更新,但是还没有到强缓存的过期时间,则数据无法更新,所以在一些需要随着服务器数据更新而更新缓存的场景下我们无法使用强缓存。这时我们就需要协商缓存
-
协商缓存
-
协商缓存依赖于服务端与浏览器之间的通信
-
协商缓存机制下,浏览器需要向服务器询问缓存的相关信息,进而判断是重新发起请求、下载完整的响应,还是从本地获取缓存的资源
-
如果服务端提示缓存资源未改动(Not Modified),资源会被重定向到浏览器缓存,这种情况下网络请求对应的状态码是 304