浏览器的缓存机制
1. 强缓存
强缓存是指在缓存期间不需要请求，直接使用缓存数据， 浏览器自己决定用不用缓存。
特点：
- 不请求服务器，直接使用缓存数据
- 如果缓存有效，返回
200 (from memory/disk cache) - 如果缓存失效，转为协商缓存或重新请求。
开起强缓存方式：
- 设置
Cache-Control: max-age=<缓存时间（单位秒）> - 设置
Expires<日期>（旧方式，不推荐）
示例：
js
Cache-Control: max-age=3600 // # 缓存1小时浏览器首次请求资源，缓存到内存/磁盘 -> 1 小时内再次请求资源 -> 浏览器直接读缓存，不请求服务器。
2. 协商缓存
协商缓存是指在缓存期间需要请求，由服务器决定是否使用缓存。
特点：
- 请求服务器，由服务器决定是否使用缓存
- 如果资源未变化：服务器返回
304 Not Modified（无响应体），浏览器用缓存。 - 如果资源有变化：服务器返回
200+ 新数据。
开起协商缓存方式：
Last-Modified+If-Modified-Since:
浏览器第一次请求资源时，服务器会在响应头中返回 Last-Modified 字段，表示资源的最后修改时间。
浏览器第二次请求资源时，会在请求头中带上 If-Modified-Since 字段，表示上次请求时资源的最后修改时间。
服务器收到请求后，会根据 If-Modified-Since 字段与资源的最后修改时间进行比对，如果相同，则返回 304 Not Modified，浏览器直接使用缓存；如果不同，则返回返回 200 + 新数据。
Etag+cache-control: no-cache:
浏览器第一次请求资源时，服务器会在响应头中返回 Etag 字段，表示资源的唯一标识，并且在响应头中设置 cache-control: no-cache。
浏览器第二次请求资源时，会在请求头中带上 If-None-Match 字段，表示上次请求时资源的 Etag。
服务器收到请求后，会根据 If-None-Match 字段与资源的 Etag 进行比对，如果相同，则返回 304 Not Modified，浏览器直接使用缓存；如果不同，则返回返回 200 + 新数据。
Etag+Cache-Control: max-age=0, must-revalidate
max-age=0指缓存立即过期 must-revalidate指允许使用缓存，前提是先问服务器。
过程同上。
Cache-Control: no-store：
no-store 指不使用任何缓存，每次请求都要向服务器请求， 并且每次都返回 200 + 新数据。
- 仅用
ETag（无Cache-Control）:
如果服务器返回 ETag 或 Last-Modified，但没有 Cache-Control，浏览器默认会先使用缓存，再向服务器验证 （类似 max-age=0）。
总结：
- 静态数据（图片/css/js） → Cache-Control: max-age=31536000（长期缓存）。
- 动态数据（动态 API 接口、实时数据） → Cache-Control: no-cache + ETag（每次验证）。
- 短缓存动态数据（如新闻数据） → Cache-Control: max-age=60, must-revalidate（过期后验证）。
- 敏感数据（如支付数据） → Cache-Control: no-store（完全不缓存）。
- 旧系统兼容 → 仅 ETag / Last-Modified（可能缓存但会验证）。