http缓存梳理

借鉴并且摘抄了这篇博客的部分内容
http缓存详解，http缓存推荐方案

http请求和响应头的缓存字段

1. Cache-control

缓存控制头，http缓存控制的最高指令

no-store：所有内容都不缓存

no-cache：缓存，但是浏览器使用缓存前，都会请求浏览器判断缓存资源是否是最新

max-age=x：请求缓存后的X秒不再发起请求，属于http 1.1的属性，与 Expire(http 1.0) 类似，但是优先级比 Expires 。这是一个相对时间，expire是绝对时间。max-age=0等同于no-cache

s-maxage=x：代理服务器请求源站缓存X秒后不再发起请求，只对CDN缓存有效

public：客户端和代理服务器都可缓存

private：只有客户端可以缓存

2.Expires

响应头，代表资源过期时间，由服务器返回提供，GMT格式日期，是http1.0的属性，在与max-age(http1.1)共存的情况下，优先级要低。

3.Last-Modified 和 if-Modified-Since

Last-Modified 是响应头，资源最新修改时间，由服务器告诉浏览器。就是该文件在文件系统中的最近修改时间。

if-Modified-Since 是请求头，资源最新修改时间，由浏览器告诉服务器，把服务器给的 Last-Modified 请求又还给服务器对比

5.Etag 和 if-None-Match，优先级比上述两项高

Etag 是响应头，资源标识，由服务器告诉浏览器。

if-None-Match 是请求头，缓存资源标识，由浏览器告诉服务器，就是服务器给的Etag，服务器进行对比。

7.Pragma

是一个在 HTTP/1.0 中规定的通用首部，这个首部的效果依赖于不同的实现，所以在“请求-响应”链中可能会有不同的效果。它用来向后兼容只支持 HTTP/1.0 协议的缓存服务器，那时候 HTTP/1.1 协议中的 Cache-Control 还没有出来。

看一张图片的加载请求。

首次加载，浏览器默认 cache-control: no-cache。服务器返回cache-control:public, max-age=0 Last-Modified: Mon, 07 Dec 2020 14:38:48 GMT ETag: "P9fD9DvFuQoSGBR4aLWx+w==",告诉浏览器缓存策略为no-cache，并且返回资源的修改时间和e-tag。用于下次请求的时候，将这两项信息返回给服务器用于判断前端的缓存文件是否最新。

GET /public/img.jpeg HTTP/1.1
Host: 127.0.0.1:7001
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://127.0.0.1:7001/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: _editor=markdown; csrfToken=E9TaTfCpenoCXMfMDi-a0qJU

HTTP/1.1 200 OK
Accept-Ranges: bytes
Last-Modified: Mon, 07 Dec 2020 14:38:48 GMT
ETag: "P9fD9DvFuQoSGBR4aLWx+w=="
content-type: image/jpeg
content-length: 61672
cache-control: public, max-age=0
content-md5: P9fD9DvFuQoSGBR4aLWx+w==
x-readtime: 1
keep-alive: timeout=5
Date: Thu, 10 Dec 2020 16:33:54 GMT
Connection: keep-alive

第二次请求，浏览器将之前服务器给的 last=modified 和 e-tag提交给服务器，也就是请求头里的 if-modified-since 和 if-none-match 。服务器判断文件没有修改，返回304。浏览器使用缓存文件。

GET /public/img.jpeg HTTP/1.1
Host: 127.0.0.1:7001
Connection: keep-alive
If-None-Match: "P9fD9DvFuQoSGBR4aLWx+w=="
If-Modified-Since: Mon, 07 Dec 2020 14:38:48 GMT
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://127.0.0.1:7001/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: _editor=markdown; csrfToken=E9TaTfCpenoCXMfMDi-a0qJU

HTTP/1.1 304 Not Modified
Accept-Ranges: bytes
Last-Modified: Mon, 07 Dec 2020 14:38:48 GMT
ETag: "P9fD9DvFuQoSGBR4aLWx+w=="
x-readtime: 0
keep-alive: timeout=5
Date: Thu, 10 Dec 2020 16:32:08 GMT
Connection: keep-alive

F5 和 CTRL+F5 的区别

1.浏览器地址栏回车，或者点击跳转按钮，前进，后退，新开窗口，这些行为，会让Expires，max-age生效，也就是说，这几种操作下，浏览器会判断过期时间，再考虑要不要发起请求，当然Last-Modified和Etag也有效。

2.F5刷新浏览器，或者使用浏览器导航栏的刷新按钮，这几种，会忽略掉Expires，max-age的限制，强行发起请求，Last-Modified和Etag在这种情况下也有效。

3**.CTRL+F5**是强制请求，所有缓存文件都不使用，全部重新请求下载，因此Expires，max-age，Last-Modified和Etag全部失效。