强制缓存：expires —— cache-control
协商缓存：last-modified / if-modified-since —— etag / if-none-match
强缓存：浏览器不发送任何请求，直接从本地缓存中读取文件。Status Code: 200 OK。
协商缓存：浏览器发送请求，通过服务器来判定是否读取本地缓存。Status Code：304 Not Modified
强制缓存
强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程，强制缓存的情况主要有三种，如下：
①不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致），如下图
②存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存，如下图
③存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果，如下图
那么强制缓存的缓存规则是什么？
当浏览器向服务器发起请求时，服务器会将缓存规则放入 HTTP 响应报文的 HTTP 头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是 Expires 和 Cache-Control，其中 Cache-Control 优先级比 Expires 高
Cache-Control
在 HTTP/1.1 中，Cache-Control 是最重要的规则，主要用于控制网页缓存，主要取值为：
public：所有内容都将被缓存（客户端和代理服务器都可缓存）
private：所有内容只有客户端可以缓存，Cache-Control 的默认取值
no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
max-age=xxx (xxx is numeric)：缓存内容将在 xxx 秒后失效相对时间
协商缓存
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：
①协商缓存生效，返回 304，如下
②协商缓存失效，返回 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
扩展
缓存方案
目前的项目大多使用这种缓存方案的：
HTML: 协商缓存；
css、js、图片：强缓存，文件名带上 hash
强缓存与协商缓存的区别
强缓存不发请求到服务器，所以有时候资源更新了浏览器还不知道，但是协商缓存会发请求到服务器，所以资源是否更新，服务器肯定知道。
大部分 web 服务器都默认开启协商缓存。
浏览器的刷新对缓存的影响
行为一：
浏览器新开窗口的输入 url 进行访问，先检查强缓存，如果命中 Status Code 会显示 200 OK (from disk cache) 或者 200 OK (from memory cache)
行为二：
地址回车或者正常重新加载（command + r）会导致浏览器跳过检查强缓存，直接去服务器检查协商缓存，如果命中则 Status Code 会显示 304 Not Modified。
行为三：
硬性的重新加载行为（command + shift + r）会导致浏览器跳过强缓存跟协商缓存，直接去请求新的资源文件，返回状态码 200。
行为四：
清空缓存并硬性重新加载。会导致浏览器把缓存清空掉，直接去请求资源，返回状态码 200。
如果是对一个站点的访问，页面里面包括静态资源，则对这种静态资源来说上述行为一跟行为二都先检查强缓存再去检查协商缓存，其他行为表现一致。
- 对单个资源的访问：网上随便找一张图片地址放在浏览器 url 里面进行访问测试。
- 对站点的访问：随便访问一个有静态资源的网站进行访问测试。
缓存资源
使用缓存可减少客户端向服务器的请求次数，节省加载时间，所有的静态资源都可以再服务器端设置缓存，并推荐使用长缓存
- 缓存一切可缓存的资源
- 使用长缓存
- 使用外联的样式和脚本
[[待办事项]]
缓存过程
#缓存
浏览器与服务器通信的方式为应答模式，即是：浏览器发起 HTTP 请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中 HTTP 头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中
简单的过程如下图：
详细：
- 强制缓存
- 协商缓存
详情参考： 前端缓存详解
长缓存方式
- HTTP 缓存
- 离线缓存 (Application Cache，已废弃)
- Service Worker（Web 缓存）
此外还有， 浏览器缓存
参考： 离线化/长缓存方案探究与实践
浏览器缓存
本地存储小容量
本地存储大容量
往返缓存：
- 往返缓存又称为 BFCache，是浏览器在前进后退按钮上为了提升历史页面的渲染速度的一种策略。该策略具体表现为，当用户前往新页面时，将当前页面的浏览器 DOM 状态保存到 bfcache 中；当用户点击后退按钮的时候，将页面直接从 bfcache 中加载，节省了网络请求的时间
参考
贡献者
jiechen