缓存作为前端性能优化的有效方式之一，对于前端开发工程师来说，相对熟悉的就是 HTTP 缓存。
一、什么是 HTTP 缓存？
HTTP 缓存指的是：当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器缓存中有“要请求的资源”的副本，则直接从浏览器缓存中获取，而不是从目标服务器中获取这个资源。
虽然 HTTP 缓存不是必须的，但重用缓存的资源通常是必要的。然而常见的 HTTP 缓存只能存储 GET 响应，对于其他类型的响应则无能为力。
二、为什么要用 HTTP 缓存？
- 减少冗余的数据传输
- 缓解服务器压力，提高网站性能
- 加快了客户端加载网页及资源的速度
三、哪些资源可以被缓存？
一般包括 html 页面和其他静态资源（js、img、css等）
四、HTTP 缓存分类
- 强缓存
- Expires（HTTP 1.0）
- Response Headers 中
- 控制缓存过期时间
- 已被 Cache-Control 代替
- 值为服务器端的绝对时间
- Cache-Control（HTTP 1.1）
- Response Headers 中
- 控制强制缓存的逻辑
- 例如 Cache-Control: max-age=31536000（单位是秒）
- 值
- max-age 缓存过期时间（相对时间）
- no-cache 不用本地强制缓存，需要进行协商缓存，发送请求到服务器确认是否使用缓存。
- no-store 不用本地强制缓存，也不用服务端缓存措施，每一次都要重新请求数据。
- private 只能被终端用户缓存，比如：电脑 浏览器 手机等
- public 允许被任何中间人（比如中间代理、CDN等）缓存
- 协商缓存（对比缓存）
- 服务器端缓存策略（服务端判断资源能不能用缓存的内容）
- 服务器判断缓存资源是否和服务端资源一样（一致返回 304，否则返回 200 和最新的资源）
- 在 Response Headers 中，有两种
- Last-Modified 资源的最后修改时间（只能精确到秒级）
- Etag 资源的唯一标示（优先使用）
五、缓存执行流程
浏览器在加载资源时，会先根据本地缓存资源的 header（expires 和 cahe-control） 中的信息判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。 当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据 header（If-Modified-Since 和 If-None-Match）中的信息来判断是否命中缓存。如果命中，则返回 304 ，告诉浏览器资源未更新，可使用本地的缓存。
六、刷新操作方式，对缓存的影响
- 三种刷新操作
- 正常操作：地址栏输入 url，跳转链接，前进后退等
- 手动刷新：F5，点击刷新按钮，右击菜单刷新
- 强制刷新：ctrl + F5（Mac：shift + command + r）
- 不同刷新操作，不同的缓存策略
- 正常操作：强制缓存有效，协商缓存有效
- 手动刷新：强制缓存无效，协商缓存有效
- 强制刷新：强制缓存失效，协商缓存失效
