HTTP缓存和浏览器缓存两者是相辅相成的关系
HTTP缓存
-
强缓存
-
协商缓存
强缓存
强缓存有关的首部字段名主要有两个：
Expires和Cache-ControlExpires
Expires 首部字段是 HTTP/1.0 中定义缓存的字段，其给出了缓存过期的绝对时间，即在此时间之后，响应资源过期，属于实体首部字段。
Expires: Wed, 11 May 2025 13:50:00 GMT
上述示例表示该资源将在以上时间之后过期，而在该时间之前浏览器可以直接从浏览器缓中读取数据，无需再次请求服务器。注意这里无需再次请求服务器便是命中了强缓存。
Cache-Control
Cache-Control 首部字段是 HTTP/1.1 中定义缓存的字段，其用于控制缓存的行为，可以组合使用多种指令，多个指令之间可以通过 “,” 分隔，属于通用首部字段。常用的指令有：max-age、s-maxage、public/private、no-cache/no store 等。
Cache-Control: max-age:3600, s-maxage=3600, public
Cache-Control: no-cache
强缓存是否新鲜取决于两个关键词：缓存新鲜度和缓存使用期。
缓存新鲜度 = max-age || (expires - date)
当 max-age 存在时缓存新鲜度等于 max-age 的秒数，是一个时间单位，就像保质期为 6 个月一样。当 max-age 不存在时，缓存新鲜度等于 expires - date 的值，expires 我们应该已经熟悉，它是一个绝对时间，表示缓存过期的时间，那么下面主要介绍下首部字段 date。
Date 表示创建报文的日期时间，可以理解为服务器（包含源服务器和代理服务器）返回新资源的时间，和 expires 一样是一个绝对时间，比如
date：Wed, 25 Aug 2021 13:52:55 GMT
协商缓存的触发条件
- 默认行为：协商缓存通常需要强缓存（
max-age）过期后才会触发。 - 强制触发：通过设置
Cache-Control: no-cache或max-age=0，跳过强缓存阶段，直接进入协商缓存流程。此时浏览器每次请求都会向服务器验证资源是否变化，无论本地是否有缓存。
Memory Cache 与 Disk Cache
Memory Cache 翻译过来便是“内存缓存”，顾名思义，它是存储在浏览器内存中的。其优点为获取速度快、优先级高，从内存中获取资源耗时为 0 ms，而其缺点也显而易见，比如生命周期短，当网页关闭后内存就会释放，同时虽然内存非常高效，但它也受限制于计算机内存的大小，是有限的。
Disk Cache 翻译过来是“磁盘缓存”的意思，它是存储在计算机硬盘中的一种缓存，它的优缺点与 Memory Cache 正好相反，比如优点是生命周期长，不触发删除操作则一直存在，而缺点则是获取资源的速度相对内存缓存较慢。
缓存获取顺序
按照缓存顺序来讲，当一个资源准备加载时，浏览器会根据其三级缓存原理进行判断。
- 浏览器会率先查找内存缓存，如果资源在内存中存在，那么直接从内存中加载
- 如果内存中没找到，接下去会去磁盘中查找，找到便从磁盘中获取
- 如果磁盘中也没有找到，那么就进行网络请求，并将请求后符合条件的资源存入内存和磁盘中
按照以上顺序，浏览器缓存与 HTTP 缓存才得以相辅相成，在有效的沟通和判断中尽可能的减少不必要的资源浪费。
