简述
如何通俗易懂的理解浏览器缓存？先介绍几个概念。
memory cache 和 disk cache
- memory cache: 将资源文件缓存到浏览器内存中。
- disk cache: 将资源文件缓存到硬盘中。
对浏览器和服务器端都有好处：
- 浏览器：缓存可以减少冗余的数据传输。节省网络带宽，提高页面加载速度。
- 服务器：缓存降低了服务器的压力，从而使服务器响应更快。
浏览器的缓存，又可分为协商缓存和强制缓存。
实现原理： 浏览器在加载资源的时，会先根据返回请求头中的信息(Expires 和 Cache-Control)来判断是否需要强制缓存。如果命中的话，则会直接使用缓存中的资源。否则的话，会向服务器发送请求，通过If-Modified-Since或If-None-Match，实现协商缓存。
强制缓存
通过Expires或Cache-Control，给资源添加过期时间，实现强制缓存。
Expires 是HTTP/1.0+，Cache-Control 是HTTP/1.1。两者所做的事情，本质上是一样的，都是指定过期时间。Expires 是绝对时间，Cache-Control 是相对时间,首选 Cache-Control。【Expires: Fri, 05 Jul 2022, 05:00:00 GMT；Cache-Control: max-age=484200】。
如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么 Expires 会被忽略。
如果设置了强制缓存时间为 10s即max-age=10，超过10s则会向服务器重新发起请求。所以，资源没有修改的话，状态码都是304，强制缓存规则生效。如下图：
协商缓存
通过请求头If-Modified-Since或If-None-Match，实现协商缓存。
If-Modified-Since
过期时间。如果从指定日期之后资源被修改，则执行请求方法。配合服务器端返回的头Last-modified工作。
工作流程：If-Modified-Since在指定的日期之后，向服务器发送进行验证。如果资源被修改，就会将新的资源和新的过期时间返回给浏览器缓存。如果资源没有被修改，则资源不返回，会给浏览器304。
If-None-Match
配合ETag实现。服务器根据资源生成的标签ETag(版本号、根据内容生成的hash值等)，会与已缓存的标签进行比对，不同的话就会执行请求。
工作流程：If-None-Match和If-Modified-Since实现类似，If-None-Match比对的是ETag内容。
- 第一次：访问页面时，因为浏览器没有缓存，是直接请求服务器获取资源的。所以，所有状态码都是
200。
- 第二次：刷新页面时，通过协商缓存进行资源比对，服务器认为：服务器缓存的资源是有效资源，可以直接返回给浏览器。所以，所有状态码都是
304。
- 第三次：再次刷新页面。间隔时间和第二次在
30s以内，则资源会直接读取memory cache或disk cache里的缓存资源【因为此资源不是向服务器获得的，是浏览器的缓存，所以不是真正的请求。所以，没有Request Headers，或者显示Provisional headers are shown. Disable cache to see full headers.】。注意：第三次时，页面刷新间隔时间超过30s，浏览器会再次向服务器发起请求，进行资源获取，由服务器判断资源是否有更新。
