Http缓存

Http缓存

http缓存控制通过Cache-Control/ETag/Last-Modified控制

Cache-Control

通过Cache-Control可以控制缓存的具体行为，如

# max-age表示从上次接收到资源（Last-Modified）后，在该时间内再次请求的话会从缓存取
# 单位second
Cache-Control: max-age=60

如我现在请求了一个资源，服务器返回Last-Modified为2022-6-25 11:45:00，表示该资源最后修改时间
那么我下次请求该资源，如果携带了Cache-Control: max-age=60，表示
Last-Modified + max-age = 2022-6-25 11:46:00 ，在这个时间之前请求该资源可以从缓存里面取
当然这个是前端控制的，可以将这个max-age调大，那么很长一段时间内都会从缓存取
如果超过了2022-6-25 11:46:00，则会发送接口请求资源，采用协商缓存
协商缓存通过ETag/Last-Modified由后端判断是否采用缓存，如果可以采用缓存则返回304

协商缓存

Last-Modified/If-Modified-Since

Last-Modified配合If-Modified-Since，浏览器在发现缓存过期后会携带If-Modified-Since
服务器收到后会检查服务器资源的最后修改时间是否在If-Modified-Since之后
如果修改时间在If-Modified-Since之后，说明缓存较旧，则会返回新的资源，状态码200
如果修改时间在If-Modified-Since之前，说明缓存还能用，状态码304，不返回数据
浏览器收到304后继续使用缓存

Etag/If-None-Match

Etag配合If-None-Match，浏览器在发现缓存过期后会携带If-None-Match
If-None-Match的值为请求服务端第一次返回的ETag
服务端收到If-None-Match后，会判断现有资源的ETag和If-None-Match是否一致
一致返回304，不一致返回新的资源
ETag的生成是服务端根据文件（包含修改时间）生成的值

扩展

• Cache-Control可以多个值并列， 如Cache-Control: public, max-age=60，更多的值参考文档
• chrome下会有两种缓存，一个是memory，一个是disk，通常css文件采用disk缓存，js存放在memory缓存，因为css文件通常加载了就不会变，js可能频繁加载