本文已参与「新人创作礼」活动，一 起开启掘金创作之路（最心疼的悲情人物桔梗）
写这篇文章主要是对自己的知识进行总结学习。在写之前觉得都清楚了，但是实际写的时候，发现有很多地方都是一知半解，所以参考了很多大神的文章，这里最下方也给了链接备注。
写的不对的地方，希望大家及时提出批评指正，本人坚决改（bu）正(gai)
浏览器缓存
缓存有很多种类，其中包括数据库缓存，CDN缓存，代理服务器缓存，DNS缓存，浏览器缓存等等。
其中浏览器缓存是和我们前端息息相关的。在平常的应用和面试中经常会被用到和问到。因为缓存用好了有很多好处。
1. 获取的数据比较快，从缓存中获取的数据，比从服务端获取的速度快很多。
2. 缓解了服务端的压力，不用每次都从服务端获取数据。
3. 节省了宽带，极大的减少了宽带的消耗。
当然如何利用好缓存才是关键，不然很可能造成数据获取错误，比方缓存过期，还是用的以前的数据，这肯定是不对的。下面我们就说说缓存利用。
1. 浏览器缓存主要分为强缓存和协商缓存。
1. 强缓存是直接从浏览器缓存中去取的，只要命中了强缓存，不会走服务端，直接获取缓存数据即可！
2. 协商缓存虽然也是从浏览器缓存中取，但是还是会向服务端发起请求，不过最后获取的数据是从缓存中拿，也是很大程度上提升了响应速度和节省了宽度资源消耗。
2. 缓存到底缓存在哪里？
1. memory cache：内存缓存
2. Disk Cache：磁盘缓存
大部分缓存都是存在这两个地方，浏览器会根据使用率和内存空间来决定缓存在哪里。
- 频繁执行读取操作的就存放在Disk中，因为IO操作消耗资源大，不适合存在在memory中。
- 内存不够的时候，就会存在Disk中。
- 大文件存在Disk中，因为电脑内存有限。
3. 缓存策略如何实现。
缓存策略依靠HTTP Header来实现。
HTTP Header 分为请求头和响应头，浏览器就是依靠这两种头来实现缓存策略的。
1. 检查是否有缓存
- 没有缓存：直接去服务器取。
2. 有缓存：判断是否命中强缓存，命中强缓存则直接取缓存内容，不走服务器。
1 看看是否设置了pragma，pargma只有一个值no-cache。表明不需要强缓存，需要和服务器验证缓存是否新鲜。
2 看看是否设置了cache-control。
2.1 no-cache 不需要强缓存，需要和服务器验证缓存是否新鲜。
2.2 max-age:[[seconds]] 设置缓存有效时间，距离发起请求的时间，超过则缓存失效。
2.3 no-store 禁止使用缓存，包括协商缓存，每次都直接从服务器获取。
2.4 private 私有缓存，不提供给中间代理和CDN
2.5 public 公共缓存，提供给中间代理和CDN
2.6 must-revalidate 可以使用强缓存，缓存过期后需验证。
3 查找是否设置了Expires，值为日期。大于等于当前系统日期则缓存生效，小于则失效
3. 没有命中强缓存，则继续判断是否命中协商缓存。
1 上次响应头中有Etag = X，则发起请求携带if-none-match = X，值为hash值。此次Etag === if-none-match则缓存生效。
2 上次响应头中有last-Modified = D，则发起请求携带last-Modified-since = D，值为Date值。此次last-Modified <= if-none-match则缓存生效。
Etag对比last-Modified的优势
1.Etag值是根据内容修改来实现的，last-Modified是最后修改时间，如果文件内容没有被修改，也会修改last-Modified，所以不是我们期望的效果。
2.最后修改时间是根据客户端时间来确认的，不能精确
3.last-Modified 精确到秒的，不能监听在秒内进行修改的文件。
用张图来表示
graph TD
客户端 --> |发起请求|查找缓存
查找缓存 --> |有|强缓存是否新鲜 --> |新鲜|读取浏览器缓存
强缓存是否新鲜 --> |不新鲜|上次响应头是否有Etag --> |是|发起请求带上if-none-match并对比此次返回的Etag --> |hash值匹配相同|返回304
发起请求带上if-none-match并对比此次返回的Etag --> |hash值匹配不相同|查找服务器
上次响应头是否有Etag --> |否|上次请求是否有last-Modified --> |是|发起请求带上last-Modified-since并对比日期 --> |返回日期小于等于携带的日期|返回304
发起请求带上last-Modified-since并对比日期 --> |返回日期大于携带的日期|查找服务器
返回304 --> 读取浏览器缓存
查找服务器 --> |返回| 浏览器
读取浏览器缓存 --> |返回| 浏览器
参考文章
1. 浏览器工作原理」写给女友的秘籍-渲染流程篇（1.1W字） - 掘金 (juejin.cn)
2. 图解 HTTP 缓存 - 掘金 (juejin.cn)
3. 浏览器缓存(1)缓存位置解析 - 掘金 (juejin.cn)
