‘壹’ 前端http请求细节——Cache-Control（缓存机制）
请求和响应中的 Cache-Control 指令并不完全相同，具体可以查看 这里 ，包括指令的具体意思，这里不过多赘述。（默认值：private）
浏览器的缓存机制是根据 HTTP 报文的缓存标识进行的，浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中 HTTP 头的缓存标识，决定是否缓存结果。
浏览器缓存策略分为两种：强制缓存和协商缓存。
强制缓存不会向服务器发送请求，直接从缓存中读取资源，可以看到请求返回的状态码都是200，并且 Size 代表该缓存的位置。
浏览器读取缓存的顺序为memory –> disk。
三级缓存原理 (访问缓存优先级)：
在浏览器中，浏览器会在js，字体，图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。
为什么CSS会放在硬盘缓存中？
因为CSS文件加载一次就可渲染出来,我们不会频繁读取它,所以它不适合缓存到内存中,但是js之类的脚本却随时可能会执行,如果脚本在磁盘当中,我们在执行脚本的时候需要从磁盘取到内存中来,这样IO开销就很大了,有可能导致浏览器失去响应。
若服务器的资源最后被修改时间 > If-Modified-Since的字段值
则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件
If-None-Match 的字段值 = 该资源在服务器的Etag值
一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200。
ETag 和 Last-Modified 区别
参考链接：
https://juejin.im/entry/5ad86c16f265da505a77dca4
https://www.cnblogs.com/suihang/p/12855345.html
https://www.jianshu.com/p/54cc04190252
‘贰’ 浏览器缓存（http缓存）
浏览器缓存有两种：强制缓存和协商缓存
向浏览器缓存中查找请求结果，根据【缓存规则】决定是否使用该结果。
强制缓存失效后，携带缓存标识请求服务器，服务器根据缓存标识判断是否使用缓存
当浏览器向服务器发送请求的时候，服务器会将缓存规则放入HTTP响应的报文的HTTP头中和请求结果一起返回给浏览器（ps：下文说的时间点均为类似：Sat Aug 14 2021 11:01:52，秒级）
两个字段：Expires和Cache-Control，优先级：Cache-Control > Expires，客户端比较时间
Expires ：HTTP/1.0，返回值为【到期时间点】，再次请求，客户端的时间< Expires，直接用缓存（ps：客户端与服务器端时间可能存在误差，出问题）
Cache-Control ：HTTP/1.1，有以下字段
Last-Modified / If-Modified-Since 和 Etag / If-None-Match，优先级Etag > Last-Modified，服务器比较时间
Last-Modified（服务端返回客户端） / If-Modified-Since（客户端传入服务端） ：两个值相同，表示：资源文件在服务器最后被修改的时间【时间点】。
Etag（服务端返回客户端） / If-None-Match（客户端传入服务端） ，两个值相同，为当前资源文件的一个唯一标识(由服务器生成)
Etag什么时候用
雅虎禁用了Etag：因为ETag的值和服务器有关，那么对于同样的文件，可能下次请求的时候是发给不同的服务器，结果也会重新发送数据，所以就会影响网页加载速度，增加服务器的压力（但Last-Modified也与服务器有关）
主要解决的问题：
浏览器的每个tab都是一个进程
两个缓存的地方 from memory cache（内存缓存） 和 from disk cache（硬盘缓存） ，读取顺序为memory > disk
‘叁’ 浏览器缓存的方式和类型（笔记）
浏览器缓存只是计算机缓存的一种
1.内存缓存
将数据存到内存
2.代理服务器缓存
就是个自己找的中介。你拿东西先找中介，中介找房东，房东给中介，中介又给你。比如你需要房子钥匙，房东把钥匙放在中介那，你直接从中介那里拿钥匙。
3.CDN缓存
将数据存到CDN服务器。CDN也是个中介，不过这个中介是根据中介的忙碌程度（CDN服务器忙碌程度）、跟你的距离（CDN服务器和你的距离）自动给你分配的。
4.浏览器缓存（ 我是个前端，只关注浏览器缓存。 ）
根据HTTP协议决定要不要缓存，以什么方式缓存，缓存到哪（内存还是硬盘等）。
浏览器缓存是将浏览器请求过的数据（资源文件）保存到电脑上。需要再次使用的时候，直接从电脑上获取保存的数据（资源文件），这就是浏览器缓存
1.减少网络请求，节省流量
2.减轻服务器压力
3.资源加载速度快了，前端性能就更好了
1.Server Worker
还没搞懂，搞懂了再来写。
2.Memory Cache
内存中的缓存，关闭页面进程就释放内存
3.Disk Memory
硬盘中的缓存，不主动清理就一直在
4、Push Cache
推送缓存，是HTTP/2的内容，并没有严格执行HTTP头部的缓存指令。在Server Worker、Memory Cache、Disk Cache都没有命中的时候，它会被使用。在Session中存在，Session结束就会被释放，缓存时间短暂。
1.先去内存查找，找到直接加载
2.内存找不到，硬盘中找，找到直接加载
3.硬盘找不到进行网络请求
4.把请求获取的资源再缓存到硬盘和内存
1.强缓存
控制强制缓存的字段分别是Expires和Cache-Control，Cache-Control优先级比Expires高
-Expires设置一个绝对时间的GMT格式的时间字符串，这个是资源失效时间（ 客户端的时间小于Expires的值，缺陷就是客户端的时间被改变就有问题 ），在这个时间之前都直接读取缓存。
-Cache-Control替代Expires，它利用的是相对时间，利用header信息字段的max-age值判断。
2.协商缓存
-Last-Modified/If-Modified-Since
Last-Modified:浏览器向服务器发送资源最后的修改时间
If-Modified-Since:当资源过期时，发现响应头具有Last-Modified声明，则再次向服务器请求时带上头if-modified-since，表示请求时间。服务器收到请求后，发现有if-modified-since则与被请求资源的最后修改时间进行对比（Last-Modified）,若最后修改时间较新，说明资源又被改过，则返回最新资源，返回200；若最后修改时间较小，说明资源无新修改，返回304 ，使用缓存文件。
缺点:单位是秒，一秒内多次改变会认为没过期
-ETag/If-None-Match
ETag:由服务器生成返回给前端，帮助服务器控制web端的缓存验证，服务器会生成并且返回当前资源文件的一个唯一标识
If-None-Match:当资源过期时，发现响应头具有Etag声明，则再次向服务器请求时带上头if-none-match（唯一标识Etag值）。服务器收到该请求后，发现有If-None-Match则根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200。
1.强缓存不发请求，协商缓存会发请求给服务器确认有没有过期
2.强缓存文件更新浏览器不知道，协商缓存更新浏览器能实时知道
1.点击浏览器的刷新按钮时，全部走缓存
2.F5或者鼠标右键刷新强制缓存失效，不影响协商缓存
3.CTRL+F5影响强制缓存和协商缓存都失效
‘肆’ get和post请求在缓存方面的区别
缓存一般只适用于那些不会更新服务端数据的请求。
一般get请求都是查找请求，不会对服务器资源数据造成修改。而post请求一般都会对服务器数据造成修改，所以，一般会对get请求进行缓存，很少会对post请求进行缓存。
‘伍’ HTTP缓存
Http 缓存机制作为 web 性能优化的重要手段，有如下作用：
以下是对HTTP中控制客户端缓存的几种方式以及优先级的梳理
浏览器在请求已经访问过的URL的时候, 会判断是否使用缓存, 判断是否使用缓存主要通过判断缓存是否在有效期内, 通过两个字段来判断:
当缓存过期后, 浏览器不会直接去服务器上拿缓存, 而是判断缓存是否有更新, 能否继续使用, 判断的方法有两种:
参考：
彻底弄懂HTTP缓存机制及原理
知乎专栏-浏览器是如何控制缓存的