目录
浏览器缓存：强缓存、协商缓存
#强缓存
#协商缓存
#补充
#拓展
浏览器缓存：强缓存、协商缓存
区别：强缓存不向服务器发送请求，协商缓存会发送请求至服务器
相同点：若命中，都直接从浏览器缓存加载资源，不从服务器加载
由响应头来控制缓存：
强缓存：Expires、Cache-Control
协商缓存（响应头+请求头）：【Last-Modified + If-Modified-Since】、【ETag + If-None-Match】
#强缓存
1. Expires
内容：GMT格式字符串，存储的是一个绝对时间
过程：
第一次请求资源 ---》返回的响应携带Expires响应头 ---》浏览器将响应内容缓存
再次请求资源 ---》浏览器缓存中查找，若有则取出Expires时间与当前时间比较
---》在Expires之前则命中，读取资源
---》否则未命中，从服务器再次加载资源时，Expires被更新
风险：若用户手动修改浏览器时间，则会造成错误
2. Cache-Control
内容：绝对时间，以秒为单位。HTTP1.1版本提出
过程：
第一次请求资源 ---》返回的响应携带Cache-Control响应头 ---》浏览器将响应内容缓存
再次请求资源 ---》浏览器缓存中查找，若有则取出Cache-Control计算有效期，与当前时间比较
---》在有效期之前则命中，读取资源
---》否则未命中，从服务器再次加载资源时，缓存Cache-Control
配置项：
max-age：最大有效时间
must-revalidate：若超时，必须发送请求验证
no-cache：不使用强缓存（面试有考）
no-store：不使用缓存（面试有考）
public / private：代理是否可缓存
#协商缓存
1. Last-Modified + If-Modified-Since
内容：Last-Modified 存储的是资源文件最后一次更新的时间
过程：
第一次请求资源 ---》返回的响应携带Last-Modified响应头 ---》浏览器将响应内容缓存
再次请求资源 ---》将上次请求回的Last-Modified中内容，放入If-Modified-Since请求头中
---》向服务器发送请求
---》服务端判断时间，判断时间可知资源是否变化
---》未变化则返回304状态码，响应头中没有Last-Modified
---》变化则返回200状态码+资源文件+最新的Last-Modified以供浏览器更新
问题点：
* 资源修改但是内容没有实质性变化，例如文件周期性重写。仍然会将文件返回给浏览器
* 无法辨别一秒内多次修改的情况，不精确
2. ETag + If-None-Match
内容：ETag 存储的是服务器根据文件内容生成的唯一标识，用字符串表示。HTTP1.1版本提出
过程：
第一次请求资源 ---》返回的响应携带ETag响应头 ---》浏览器将响应内容缓存
再次请求资源 ---》将上次请求回的ETag中内容，放入If-None-Match请求头中
---》向服务器发送请求
---》服务端再次根据文件内容生成ETag，与收到的If-None-Match比较可知文件是否有变化
---》未变化则返回304状态码+新生成的ETag（浏览器更新），不返回资源
---》变化则返回200状态码+资源文件+最新的ETag以供浏览器更新
#补充
Q：刷新操作对缓存的影响？
A：正常操作（输入地址URL、跳转连接、前进后退等等）：强缓存与协商缓存均有效
手动刷新（f5、点击菜单刷新、右键刷新）：强缓存失效，协商缓存有效
强制刷新（ctrl + f5）：强缓存、协商缓存均失效
#拓展
面试问题：前端存储有哪些？
（cookie、sessionStorage、localStorage、浏览器缓存、indexDB...）
如果觉得《浏览器缓存——强缓存 协商缓存》对你有帮助，请点赞、收藏，并留下你的观点哦！
