这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战
前言
“八月的色彩是用金子铸就的，明亮而珍贵；八月的色彩是用阳光酿造的，芬芳而灿烂。”
未来的日子，愿你把自己调至最佳状态，缓缓努力，慢慢变好 Y(^o^)Y
什么是缓存？
缓存是一种保存资源副本并在下次请求时直接使用该副本的技术，当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载
缓存的好处。
通过复用以前获取的资源，可以显著提高网站和应用程序的性能。Web 缓存减少了等待时间和网络流量，因此减少了显示资源表示形式所需的时间。通过使用 HTTP缓存，变得更加响应性
缓存的存储位置
memory cache内存 内嵌的图片(image)、脚本链接（js）、字体（font）disk cache磁盘 脚本（js）、样式文件（CSS）
三级缓存原理
-
先去内存看，如果有，直接加载
-
如果内存没有，择取硬盘获取，如果有直接加载
-
如果硬盘也没有，那么就进行网络请求
-
加载到的资源缓存到硬盘和内存
强制缓存
不会向服务器发送请求，依靠缓存资源中的header信息来判断是否命中强制缓存，如果命中就从缓存中读取资源。
header中控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。
Expires
缓存过期时间，是服务端返回。Expires是HTTP/1.0控制网页缓存的字段，如果当前时间小于过期时间直接使用缓存。
这样就有一个缺点：如果修改了本地时间，可能会造成缓存失效
Cache-Control
基于Expires 的缺点，在HTTP/1.1中，Cache-Control是最重要的规则。
| 值 | 说明 |
|---|---|
public | 所有内容都将被缓存（客户端和代理服务器都可缓存） |
private | 所有内容只有客户端可以缓存，Cache-Control的默认取值 |
no-cache | 客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定 |
no-store | 所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存 |
max-age=xxx (xxx is numeric) | 缓存内容将在xxx秒后失效 |
协商缓存
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。
主要有两种情况:
- 协商缓存生效，返回
304和Not Modified - 协商缓存失效，返回
200和请求结果
协商缓存的标识是在响应报文的HTTP头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：Last-Modified / If-Modified-Since和Etag / If-None-Match，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高
Last-Modified / If-Modified-Since
last-modified是客户端第一次发请求的后，服务端在response header中返回请求的资源最后一次次更新时间，浏览器会缓存下这个时间。- 浏览器再次请求，
request header中带上if-modified-since:[保存的last-modified的值]。根据浏览器发送的修改时间和服务端的修改时间进行比对，一致的话代表资源没有改变，服务端返回正文为空的响应，让浏览器中缓存中读取资源，这就大大减小了请求的消耗
缺点：
短时间内资源发生了改变，Last-Modified 并不会发生变
Etag / If-None-Match
ETag 可以保证每一个资源是唯一的，资源变化都会导致 ETag 变化，是服务端生成的。
- 客户端发送请求，服务端在
response header中返回一个ETag，浏览器会缓存下这个标识。 - 浏览器再次发起请求的时候，
request header中带上if-none-match:[保存的Etag的值]，服务器根据浏览器上送的If-None-Match值和服务端重新生成的etag的值进行比对，如果一致代表资源没有改变，服务端返回正文为空的响应，告诉浏览器从缓存中读取资源。否命中缓存。
结语
强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存
如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。
文章如有错误之处，希望在评论区指正🙏🙏。
