浏览器缓存--强制缓存 协商缓存
缓存机制
http协议在客户端与浏览器端建立连接需要消耗时间，而大的响应需要在客户端和服务器之间进行多次往返通信才能获得完整响应，因此利用浏览器的缓存机制重用以前获取的数据可以优化性能
浏览器与服务器通信的方式为应答模式，浏览器发起请求 - 服务器响应该请求，浏览器第一次向服务器发送请求后拿到请求结果，会根据响应报文中HTTP的缓存标识，决定是否缓存结果，是则将请求结果与缓存标识存入浏览器缓存中
根据是否需要向服务器重新发起HTTP请求，将缓存分为强制缓存和协商缓存
强制缓存：
强缓存不需要发请求到服务器，向浏览器缓存查找请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果
- 1.不存在该缓存结果和标识，强制缓存失效，直接向服务器发起请求
- 2.存在缓存结果和标识，但该结果已失效，使用协商缓存
- 3.存在该缓存结果和缓存标识，且结果尚未失效，强制缓存生效，直接返回结果
浏览器向服务器发送请求时，服务器会将缓存规则放入HTTP头中和结果一起返回浏览器，
控制强制缓存的字段是Expires和Cache-Control（优先级高）
HTTP1.0 expires值为缓存到期的时间，即再次发起该请求时，若客户端的时间小于Expires的值，则直接使用缓存结果
到了HTTP/1.1 Expires已经被Cache-Control替代 因为expires的原理是使用客户端的时间与服务端返回的时间做对比，但双方如果时间因为某些原因有误差，强制缓存会失效，使用Cache-control中的Max-age设置资源有效期（秒）
max-age是如何计算的？
- 服务端设置：服务器在返回资源时，加上 Cache-Control: max-age=3600（单位：秒）。
- 浏览器接收：浏览器收到响应后，记录下当前的时间点（假设是 10:00:00）。
- 有效期限：浏览器会计算出 $10:00:00 + 3600s = 11:00:00$。
- 再次请求：只要在 11:00:00 之前，浏览器都会直接从缓存里取数据，状态码显示 200 (from disk/memory cache)，根本不会产生网络流量
cache-control 常见指令：
max-age: 设置有效期（秒） 根据响应头的date值加上max-age就是缓存到期的时间
no-cache：强制协商缓存，向服务器发起请求
no-store：禁止任何缓存 比no-cache优先级更高
协商缓存：
当强缓存过期后，浏览器会携带缓存标识询问服务器
- 1.协商缓存生效，返回304状态码代表该资源未更新，使用浏览器的缓存结果
- 2.协商缓存失效，返回200和新的请求结果
控制协商缓存的字段有 Last-Modified / if-Modified-Since 和 Etag / if-None-Match
Last-Modified & If-Modified-Since
- Last-Modified 服务器响应请求时，返回该资源在服务器最后被修改的时间，
- 浏览器再次访问资源时，检测到缓存文件里有Last-Modified，就在请求头里加If-Modified-Since，值为Last-Modified的值，
- 服务器收到请求头里有If-Modified-Since，拿这个值与文件的最后修改时间做对比，如果没有变化返回304，否则资源更新，返回200
ETag & If-None-Match (优先级更高)
- 服务器响应：ETag: "678df321-21"（文件的唯一哈希指纹）。
- 浏览器请求：If-None-Match: "678df321-21"，比较是否一致，一致返回304通知浏览器使用本地缓存，不一致返回新的资源，新的ETag，状态码200
- 优点：只要文件内容变了，哈希就变，非常精准。
Service Worker（额外扩展）
Service Worker 是一种特殊的 Web Worker，它运行在浏览器后台，脱离于 HTML 页面。它的核心特性包括：
- 事件驱动：它只在需要时被唤醒（如网络请求、推送通知）。
- 网络拦截：通过监听 fetch 事件，它可以修改请求或伪造响应。
- 独立存储：拥有专属的 CacheStorage API
设置了Service Worker 当页面发起请求时，浏览器的查找路径是：
Service Worker Cache -> Memory Cache -> Disk Cache (强缓存) -> 网络 (协商缓存)
前端构建后的文件怎样设置缓存规则最好（扩展）
| 文件类型 | 缓存策略 | 典型Cache-Control | 原因 |
|---|---|---|---|
| HTML | 不缓存 / 协商缓存 | no-cache 或 max-age=0 | 作为应用入口，需实时获取最新资源清单 |
| JS/CSS（带哈希） | 强缓存 | max-age=31536000（一年） | 内容变化时文件名变化，旧文件可永久缓存 |
| 图片/字体（稳定） | 强缓存 | max-age=31536000 | 变动极少 |
| 公共库（vendor） | 强缓存 + CDN | max-age=31536000 | 跨项目复用，命中率极高 |
入口文件：index.html
不设置缓存，实时更新资源
带哈希的静态资源：*.xxxx.js / *.xxxx.css / *.png / *.jpg 等
核心原则：设置超长强缓存，永不过期（文件更新靠哈希变更）
