——这个系列是对自己最近复习的知识点的总结，便于快速回顾记忆，如果有帮助，不妨点个赞哈！
打开google浏览器，按下f12，平时有注意到这些东西吗？
这个？
这个？
还有下面这个？
当然上面这些都是属于浏览器缓存的范畴。本文将总结一下，浏览器缓存。
为了加强提升用户体验，对用浏览器访问到客户端的一些资源，都是会在浏览器里面进行缓存(协商缓存是默认开启的，强缓存需要手动去修改请求头)
那么缓存分几类呢？
- 强缓存
- 协商缓存
他们的主要区别在于流程的不同，浏览器走强缓存，服务端是没有感知的，但是走协商缓存的话，服务端是一定会有感知的。
流程
- 客户端在第一次请求服务端时会存下一些标志，如图上（下文细🔒）
- ->在第二次请求时判本地是否达成强缓存条件。
- ->达成的话，直接返回200并从浏览缓存拿出结果。
- ->如果没有达成就去访问服务端，服务端判断是否达成协商缓存条件。
- ->达成的话就返回304，然后去浏览器缓存中拿出结果。
- ->如果又没达成就重新请求客户端。
强缓存
先细🔒一下强缓存。它有两个标志去控制，expires和cache-control;并且cacche-control的优先级是大于expires的，也就是说如果两者都存在的情况下，以cache-control为依据。
expires的值是一个具体时间，服务器返回该请求结果缓存的到期时间，当第二次请求时候浏览器会对比本地的过期时间，决定是否用缓存，还是继续查看协商缓存字段。
cache-control的常用值：
no-cache就是不使用强缓存，
no-store：不使用缓存。
max-age：是相对的过期时间，是相对于第一次而言。
协商缓存
它的标志有 Last-Modified / If-Modified-Since Etag / If-None-Match
与强缓存一样也有两种方式，且后一组的优先级大于前一组。左边的都是服务端第一次请求发过来的附在响应头上，右面的是请求服务器时带着请求头上面，值是左边对应的值。
第一组返回的是绝对时间，用于直接对比，但不排除更新了但是没有修改具体内容，比如文件动态调用Date对象。
所以采用第二组对每一次改动做一次标志，对比两次标志是否不同决定是否采用协商缓存。
