概述
浏览器资源请求的时候，必不可少肯定会对资源进行缓存，这是对性能的一种必不可少的策略，为的就是带给用户更好的用户体验。
缓存
为什么缓存？
减少网络请求（网络请求不稳定性），让页面渲染更快
哪些资源可以被缓存？
静态资源（js css img）webpack/vite打包加contenthash根据内容生成hash
http缓存策略
强缓存
服务端在Response Headers中返回给客户端缓存标识字段（Cache-Control、 Expires）
Cache-Control的值取值
- max-age：（常用）缓存的内容将在max-age秒后失效
- no-cache：（常用）不要本地强制缓存，正常向服务端请求（只要服务端最新的内容）。需要使用协商缓存来验证缓存数据（Etag Last-Modified）
- no-store： 不要本地强制缓存，也不要服务端做缓存，所有内容都不会缓存，强制缓存和协商缓存都不会触发
- public： 所有内容都将被缓存（客户端和代理服务器都可缓存）
- private： 所有内容只有客户端可以缓存
Expires
- Expires：Thu, 31 Dec 2037 23:55:55 GMT（过期时间）
- 已被Cache-Control代替
强制缓存的流程
- 浏览器第一次请求资源，服务器返回资源和Cache-Control Expires
- 浏览器第二次请求资源，会带上Cache-Control Expires，服务器根据这两个值判断是否命中强制缓存
- 命中强制缓存，直接从缓存中读取资源，返回给浏览器
- 未命中强制缓存，会带上If-Modified-Since If-None-Match，服务器根据这两个值判断是否命中协商缓存
- 命中协商缓存，返回304，浏览器直接从缓存中读取资源
- 未命中协商缓存，返回200，浏览器重新请求资源
流程图
协商缓存
属于服务端缓存策略，服务端判断客户端资源，是否和服务端资源一样如果判断一致则返回304（走缓存），否则返回200和最新资源， 服务端在Response Headers中返回给客户端缓存标识字段（Last-Modified、 Etag）
- Last-Modified和Etag会优先使用Etag，Last-Modified只能精确到秒级，如果资源被重复生成而内容不变，则Etag更准确
- Last-Modified 服务端返回的资源的最后修改时间
- If-Modified-Since 客户端请求时，携带的资源的最后修改时间（即Last-Modified的值）
协商缓存流程
示例
- 通过Etag或Last-Modified命中缓存，没有返回资源，返回304，体积非常小
概览图
注意
强制缓存的优先级高于协商缓存
