HTTP缓存了解（一）

引言

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的存在进而去比较

参考链接

https://cloud.tencent.com/developer/section/1189886

https://www.cnblogs.com/chenqf/p/6386163.html