一、什么是浏览器缓存策略？
浏览器缓存策略是浏览器为了优化网页加载性能、减少网络请求而采用的一系列数据存储与复用机制。它通过将已加载的资源（如 HTML、CSS、JavaScript、图片、视频等）临时存储在本地（如用户设备的硬盘或内存中），当用户再次访问相同资源时，无需重新从服务器下载，而是直接从本地缓存读取，从而提升体验。
由于网站上的静态资源可能会更新，下载的静态资源不可能永远进行使用，为了解决“如何判断资源是否需要更新” 以及 “如何最大限度减少网络请求”，便分为了协商缓存和强缓存两种不同的策略。
二、强缓存和协商缓存介绍
最直接区分强缓存和协商缓存概念：
强缓存不会向服务器发送请求，能够直接从本地获取缓存资源
协商缓存则需要向服务器发送请求，根据请求头的不一致返回的情况也不同
http里与缓存机制相关的报文字段：
**强缓存**
响应头设置
Cache-Control: max-age=3600 # 缓存1小时（给一个缓存存在的多长的时间段，比如缓存一小时后失效）
Expires: Wed, 21 Oct 2024 07:28:00 GMT（直接给一个缓存日期，超过日期缓存则无效）
（Cache-Control优先级高于Expires）
**协商缓存**（一般是组合使用）
首次请求响应头
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT
再次请求头
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
If-Modified-Since: Wed, 21 Oct 2024 07:28:00 GMT
Etag与If-None-Match组合（优先度更高）：首次请求会得到一个Etag进入缓存，再次请求会与Etag值进行对比，
如果一致则服务器返回304，直接从本地缓存获取资源。如果不一致，则响应200，从服务器获得更新的资源
Last-Modified与If-Modified-Since：根据记录的时间来经历上述过程
Cache-Control也可以携带一些属性
比如：Cache-Control: max-age=31536000, immutable, stale-while-revalidate=60
no-store：不缓存任何东西（登录页/敏感数据）
no-cache：每次用前都要协商（发条件请求）
max-age=秒：强缓存有效期
must-revalidate：过期后必须去验证
immutable：声明资源永不改变
stale-while-revalidate=秒：过期后先用旧的，后台再偷偷刷新
三、请求—响应流程
-
能直接用缓存的时候（命中强缓存）：
浏览器一看本地缓存里的资源还没过期，就直接拿来用，根本不向服务器发请求，速度最快。 -
缓存过期了，或者明确要求必须检查的时候（强缓存失效 / 带 no-cache 标记）：
浏览器会发一个 "轻量请求" 问服务器："我这有个旧资源，你那更新过吗？"
如果标签匹配（没更新），就返回 304 状态码，浏览器继续用本地缓存。
如果标签不匹配（更新了），就返回 200 状态码和新资源，浏览器存下新资源并更新标记。 -
第一次请求，或者明确不让用缓存的时候：
浏览器直接从服务器下载全新资源（返回 200），同时记住服务器说的 "这个资源该怎么存、能存多久"，方便下次用。
前端常用发布策略
HTML：no-cache
指纹化静态资源：max-age=31536000, immutable
API：ETag + 条件请求（可加 stale-while-revalidate 提升体验）
CDN：配合 s-maxage；源站保留协商头
（如果有误欢迎指正）
