http缓存
header里缓存相关的属性
-
Expires
响应头,代表该资源的过期时间，在http1.0引入
-
Cache-control
请求/响应头，可以配置缓存策略，在http1.1引入，与Expires同时存在时，优先使用Cache-control
-
If-Modified-Since
请求头，资源最近修改时候，浏览器通过request header传给服务器
-
Last-Modified
响应头，资源最近修改时间，服务器通过response header传给浏览器
-
Etag
响应头，资源标识，服务器通过response header传给浏览器
-
If-None-Match
请求头，缓存的资源标识，浏览器通过request header传给服务器
原始模式
浏览器请求服务器资源（1KB），服务器读取本地资源（10KB）,服务器返回资源给浏览器（1KB）
总共12KB
请求n次，花费12nKB
缓存模式
浏览器请求服务器资源（1KB），服务器读取本地资源（10KB）,服务器返回资源给浏览器（1KB）
总共12KB
浏览器再次请求会读取浏览器缓存，不需要给服务器发送请求
请求n次，花费12KB
http1.0缓存
约定过期时间Expires
格式Fri, 01 Jan 2021 00:00:00 GMT，第一次请求资源返回后，浏览器会缓存服务器返回的Expires，下次请求未超过Expires的时间就直接读取浏览器的缓存，不需要向服务器发送请求，如果Expires过期了，就发起新的请求，并返回新的Expires存起来，不断循环，这个又称强缓存。
文件最后修改时间Last-Modified
未保证文件尽量是最新的，缓存时间一般不会太长，但是又不排除资源会很长时间才更新，因此引入资源的Last-Modified。
在第一次请求拉取资源后，浏览器会存下每个资源请求响应的Last-Modified字段，在Expires过期后，浏览器发起请求重新拉取的资源，此时请求header会带上资源最新修改时间作为If-Modifies-Since属性的值，如果发现拉取资源的Last-Modified和If-Modifies-Since一样，便不再读取资源，让浏览器继续读缓存，又称协商缓存。
缺点：
- Expires 过期控制不稳定，因为浏览器端可以随意修改时间，导致缓存使用不精准。
- Last-Modified 过期时间只能精确到秒。
http1.1缓存
引入cache-control
Cache-Control：max-age=10 代表意思是在10秒以内，使用缓存到浏览器的 a.js 资源。
浏览器先检查 Cache-Control，如果有，则以 Cache-Control 为准，忽略 Expires。如果没有 Cache-Control，则以 Expires 为准。
引入Etag
为了解决文件修改时间只能精确到秒带来的问题，和文件内容没修改，但是文件最近修改时间修改了的问题。引入了Etag 文件内容的唯一标识ID。浏览器会存下Etag为了header的If-None-Match的值传给服务器核对内容是否又修改，修改了才重新拉取资源。
主动拉起更新的资源
服务器在缓存时间期间更新了数据，浏览器就没办法主动拉取最新的资源。
如果每次把更新的资源的名字也同时修改，在浏览器端就会对没缓存过的资源名进行资源拉取，从而实现浏览器主动拉取服务器更新的资源，一般webpack会默认在打包的时间，在文件名后加上hash值，每次更新的文件就改变其hash值，实现新资源能及时拉取。
http header中与缓存有关的key
| key | 描述 | 存储策略 | 过期策略 | 协商策略 |
|---|---|---|---|---|
| Cache-Control | 指定缓存机制，覆盖其它设置 | ✔️ | ✔️ | |
| Pragma | http1.0字段，指定缓存机制 | ✔️ | ||
| Expires | http1.0字段，指定缓存的过期时间 | ✔️ | ||
| Last-Modified | 资源最后一次的修改时间 | ✔️ | ||
| ETag | 唯一标识请求资源的字符串 | ✔️ |
Cache-Control
浏览器缓存里， Cache-Control是金字塔顶尖的规则， 它藐视一切其他设置， 只要其他设置与其抵触， 一律覆盖之.
不仅如此， 它还是一个复合规则， 包含多种值， 横跨 存储策略 ， 过期策略 两种， 同时在请求头和响应头都可设置.
语法为: "Cache-Control : cache-directive".
Cache-directive共有如下12种(其中请求中指令7种， 响应中指令9种):
| Cache-directive | 描述 | 存储策略 | 过期策略 | 请求字段 | 响应字段 |
|---|---|---|---|---|---|
| public | 资源将被客户端和代理服务器缓存 | ✔️ | ✔️ | ||
| private | 资源仅被客户端缓存， 代理服务器不缓存 | ✔️ | ✔️ | ||
| no-store | 请求和响应都不缓存 | ✔️ | ✔️ | ✔️ | |
| no-cache | 相当于max-age:0，must-revalidate即资源被缓存， 但是缓存立刻过期， 同时下次访问时强制验证资源有效性 |
✔️ | ✔️ | ✔️ | ✔️ |
| max-age | 缓存资源， 但是在指定时间(单位为秒)后缓存过期 | ✔️ | ✔️ | ✔️ | ✔️ |
| s-maxage | 同上， 依赖public设置， 覆盖max-age， 且只在代理服务器上有效. | ✔️ | ✔️ | ✔️ | |
| max-stale | 指定时间内， 即使缓存过时， 资源依然有效 | ✔️ | ✔️ | ||
| stale-while-revalidate | 允许你使用缓存的内容尽快响应请求（如果可用），如果未缓存，则回退到网络请求。 然后，网络请求用于更新缓存。 | ✔️ | ✔️ | ✔️ | |
| min-fresh | 缓存的资源至少要保持指定时间的新鲜期 | ✔️ | ✔️ | ||
| must-revalidation / proxy-revalidation | 如果缓存失效， 强制重新向服务器(或代理)发起验证(因为max-stale等字段可能改变缓存的失效时间) | ✔️ | ✔️ | ||
| only-if-cached | 仅仅返回已经缓存的资源， 不访问网络， 若无缓存则返回504 | ✔️ | |||
| no-transform | 强制要求代理服务器不要对资源进行转换， 禁止代理服务器对 Content-Encoding， Content-Range， Content-Type字段的修改(因此代理的gzip压缩将不被允许) |
✔️ | ✔️ |
用户操作行为与缓存
用户在使用浏览器的时候，会有各种操作，比如输入地址后回车，按F5刷新等，这些行为会对缓存有什么影响呢？
