引言
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html; charset=utf-8
Content-Length: 3
ETag: W/"3-fiQN50+x7Qj6CNOAY/amqRRiqBU"
Date: Mon, 29 Apr 2019 09:08:06 GMT
Connection: keep-alive
Host: 127.0.0.1:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1
X-Forwarded-For: 127.0.0.1
If-None-Match: W/"b-e1AsOh9IyGCa4hLN+2Od7jlnP14"
Cache-Control: max-age=0
最近，在抓包的时候发现了一些奇怪的请求头，并不像熟悉的User-Agent一样，感觉上不常用，却能够在大部分地方见到
Accept-Encoding
百科中介绍，HTTP Header中Accept-Encoding 是浏览器发给服务器,声明浏览器支持的编码类型
upgrade-insecure-requests
自动将https页面中的http请求升级为https，在http头中指定
Content-Security-Policy: upgrade-insecure-requests即可
而在请求头中的upgrade-insecure-requests为1则表示，浏览器支持这种这种方式，并且之后都使用https
而对Pragma,Cache-Control,Etag几个头的查找，引起了学习的过程
缓存
有时候在开发时，明明前端代码更改，在显示时却没有任何改变，虽然知道可能是缓存的问题，但是却没有深入的去了解。
如何判断一个页面是否经过缓存？观察它的状态码即可，状态码304表示not modified，页面未曾改变，即使用缓存
浏览器在什么时候进行缓存？
缓存规则
这部分概念参考文章
sequenceDiagram
浏览器->>缓存数据库: 请求数据
缓存数据库->>浏览器: 没有找到缓存
浏览器->>服务端: 请求数据
服务端->>浏览器: 返回数据和缓存规则
浏览器->>缓存数据库:将数据和缓存规则存入数据库
强制缓存
缓存命中
sequenceDiagram
浏览器->>缓存数据库:请求数据
缓存数据库->>浏览器:缓存存在且未过期，返回数据
缓存未命中
sequenceDiagram
浏览器->>缓存数据库:请求数据
缓存数据库->>浏览器:缓存数据失效
浏览器->>服务端:请求数据
服务端->>浏览器:返回缓存规则和数据
浏览器->>缓存数据库:将缓存规则和数据存入缓存数据库
对比缓存
缓存命中
sequenceDiagram
浏览器->>缓存数据库:获取缓存数据的标识
缓存数据库->>浏览器:返回缓存数据库的标识
浏览器->>服务端:请求缓存标识对应的数据是否失效
服务端->>浏览器:通知浏览器对应的数据未失效
浏览器->>缓存数据库:获取数据
缓存未命中
sequenceDiagram
浏览器->>缓存数据库:获取缓存数据的标识
缓存数据库->>浏览器:返回缓存数据库的标识
浏览器->>服务端:请求缓存标识对应的数据是否失效
服务端->>浏览器:返回最新数据和缓存规则
浏览器->>缓存数据库:将数据和缓存规则存入数据库
与强制缓存有关的头
强制缓存的缓存规则是由几个http头决定的
expire
缓存过期时间,超出此时间即代表缓存失效
Pragma
在http1.0中使用，用于向后兼容
使用方法
Pragma:no-cache与Cache-Control: no-cache效果一致，进行对比缓存
Cache-Control
cache-Control更加详细的声明了缓存的规则
可缓存
| 头 | 作用 |
|---|---|
| public | 指示响应可能被任何缓存缓存。 |
| private | 指示该响应是针对单个用户的，并且不能由共享缓存存储。私有缓存可以存储该响应。 |
| no-cache | 在释放缓存副本之前，强制高速缓存将请求提交给原始服务器进行验证。 |
| only-if-cached | 表示不检索新数据。客户端只希望获得缓存的响应，并且不应该联系原始服务器以查看是否存在新的副本。 |
Expiration
| 头 | 作用 |
|---|---|
| max-age= |
指定资源被视为新鲜的最长时间。相反Expires，这个指令是相对于请求的时间而言的。 |
| s-maxage= |
覆盖max-age或Expires标题，但它只适用于共享缓存（例如，代理）并被私有缓存忽略。 |
| max-stale[= |
表示客户愿意接受超过其到期时间的响应。或者，您可以以秒为单位指定一个值，指示响应不能过期的时间。 |
| min-fresh= |
表示客户想要的响应至少在指定的秒数内仍然是新鲜的。 |
| stale-while-revalidate= |
指示客户端愿意接受陈旧的响应，同时在后台异步检查新的响应。秒值指示客户愿意接受陈旧响应的时间。 |
| stale-if-error= |
重新验证和重新加载
| 头 | 作用 |
|---|---|
| must-revalidate | 缓存必须在使用前验证陈旧资源的状态，不应使用过期资源。与之proxy-revalidate相同must-revalidate，但它仅适用于共享缓存（例如，代理）并被私有缓存忽略。 |
| immutable | 表示响应主体不会随着时间而改变。资源如果未到期，则在服务器上保持不变，因此，即使用户明确刷新页面，客户端也不应为其发送条件重新验证（以检查更新。根据 HTTP 规范，不知道这个扩展的客户端必须忽略它们。在 Firefox 中，immutable只有在交易中才有荣誉 |
。
其他
| 头 | 作用 |
|---|---|
| no-store | 缓存不应该存储有关客户端请求或服务器响应的任何内容。 |
| no-transform | 不应该对资源进行转换或转换。Content-Encoding ，Content-Range ，Content-Type 标头不得被代理修改。例如，一个不透明的代理可能会在图像格式之间进行转换，以节省缓存空间或减少慢速链接上的流量。该no-transform指令不允许这样做。 |
常用的有以下几个
| 头 | 作用 |
|---|---|
| private | 客户端可以缓存 |
| public | 客户端和代理服务器都可以缓存 |
| max-age= |
缓存的内容将在多少秒后失效 |
| no-cache | 使用对比缓存来验证缓存数据 |
| no-store | 所有数据都不会储存 |
与对比缓存有关的头
Last-Modified / If-Modified-Since
在浏览器进行第一次请求时，服务端会带上last-modifed头，来告诉浏览器资源最后的修改时间
在浏览器进行下一次请求，,会带上if-modified-since头，来请求服务端，如果服务端判断在if-modified-since指定的时间内资源没有进行变更，则返回304，使用缓存数据
如果服务段判断在if-modified-since指定的时间内资源进行变更，则返回200，返回更新后的数据
Etag / If-None-Match
在浏览器进行第一次请求时，服务端会返回一个Etag头，唯一标识资源
在浏览器进行下一次请求时，会在if-none-match请求头中，将第一次请求获得的Etag加上，服务端接收到if-none-match后，会与被请求资源的Etag进行比较，如果服务端判断没有改变，则返回304
如果服务端判断已经改变，则返回200
强制缓存和对比缓存之间的关系
Etag / If-None-Match 的优先度高于 last-modified和last-modified-since所以浏览器会先判断etag的存在进而去比较