HTTP 缓存实现方式 :
- 强制缓存 : 浏览器判断缓存是否过期 , 没过期就用本地缓存
- 协商缓存 : 服务端通知客户端是否用缓存
强制缓存
已用强制缓存的标识 : status Code: 200 (from disk cache)
Response Header 标识缓存有效期之一
Cache-Control
: 相对时间Expires
: 绝对时间Cache-Control
优先级高于Expires
Cache-Control 的实现流程 :
- 浏览器请求服务器资源时 , Response 头部会加上
Cache-Control
- 浏览器再请求服务器的该资源时,会判断
Cache-Control
的过期时间 - 没有过期 , 就用该缓存
- 当过期 , 就重新请求 , 并
Cache-Control
协商缓存
协商缓存的 2 种实现方式
If-Modified-Since
,Last-Modified
If-None-Match
,ETag
Etag
优先级更高
If-Modified-Since
, Last-Modified
:
- 响应头
Last-Modified
: 资源的最后修改时间 - 请求头
If-Modified-Since
: 当资源过期 , 带上标识If-Modified-Since
请求,服务器对If-Modified-Since
与Last-Modified
比较 , 当Last-Modified
大 , 就返回最新资源;当Last-Modified
小,就304
走缓存
If-None-Match
, ETag
:
- 响应头
Etag
: 唯一标识响应资源 - 请求头
If-None-Match
: 当资源过期,将请求头If-None-Match = Etag 值
请求,服务器对If-None-Match
与Etag
比较,当没变化 , 就返回 304,当变化 , 就返回 200
ETag
解决 Last-Modified
问题:
- 没修改文件时 ,
Last-Modified
也可能改变 If-Modified-Since
粒度只能是秒级 ,Etag
能秒级刷新多次- 不能精确获取文件的
Last-Modified
强制缓存/协商缓存的工作流程:
- 浏览器请求服务器,返回
Response + ETag
资源 - 浏览器再次请求访问服务器的该资源时,检查强制缓存是否过期
- 没有过期,就用本地缓存
- 缓存过期,
Request + If-None-Match
请求服务器
- 服务器收到请求,将
If-None-Match
与ETag
比较- 值相等,就返回
304 Not Modified
- 不相等,就返回
200 + ETag + 资源
- 值相等,就返回
- 浏览器收到
304
,就加载本地缓存