为什么要有浏览器缓存？
浏览器缓存(Brower Caching)是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力
http缓存机制主要在http响应头中设定，响应头中相关字段为Expires、Cache-Control、Last-Modified、Etag。
浏览器缓存从无到有，再到利用缓存的流程：
浏览器首次请求，缓存从无到有，缓存文件可能不一定是从web服务器请求来的，也可能是从CDN来的，但总而言之第一次一定是请求来的
浏览器对同样的资源发起二次请求，针对不同资源类型（比如JS文件等等），服务器进行判断
部分静态资源文件，可以判断缓存时长，如果未过期就可以从本地读取
浏览器缓存类型
- 强缓存
浏览器不会向服务器发送任何请求，直接从本地缓存中读取文件并返回 Status Code: 200 OK
从内存读取，因为速度快于硬盘，所以最优先由内存读取
从硬盘读取，如果内存中没有，就会从硬盘中读取
如果以上两个地方都没有对应的缓存资源，才会去服务器寻找对应的缓存资源。
- 协商缓存
所谓协商缓存，简单说就是先看看本地缓存过期没有，没过期直接用，过期了去浏览器看看本地这个缓存还能不能用，能用接着用。不能用就请求最新的。
协商缓存HTTP Code : 304
服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；
协商缓存HTTP Code : 200
浏览器首次请求，本地没有缓存可用。去服务器请求缓存，得到200的响应
浏览器针对协商缓存判断流程
比如Get请求JS文件，请求头中会加入属性：Last-Modified/If-Modified-Since或者ETag/If-None-Match
Last-Modifed/If-Modified-Since和Etag/If-None-Match是分别成对出现的，呈一一对应关系
之所以会有这两种属性，是因为前者是HTTP 1.0版本的，后者是HTTP 1.1版本出现的
这两个都是用来判断文件是否需要更新的时间戳或者hash值，服务器收到请求后，根据这两个属性进行判断，如果请求的文件没有更新，那么就返回HTTP304的状态码，让浏览器直接用缓存（Disk or Menmory)。而是否追加这个属性，由浏览器自行判断
但一般像是Ajax的Get、Post（类似这种的XHR）等，如果浏览器后端利用代码明确设置了Cache-Control：no-cache的选项，则不会缓存数据，到了服务端就重新请求数据
也就是no-cache的情况下，必须到服务器进行check，当服务器返回304的时候，才允许使用浏览器缓存，否则必须请求新数据
注意：ETag的优先级是优于 Last-Modified＆If-Modified-Since，如果校验Header是ETag+If-None-Match的情况下，就会优先验证ETag的Hash值
CDN缓存参考：https://blog.csdn.net/Runnymmede/article/details/138315636
参考文章1：https://juejin.cn/post/6844904153043435533
参考文章2：https://juejin.cn/post/6844903838768431118
