改完首页 CSS 推到服务器，自己浏览器里还是旧样式，按 F5 没用。F12 里勾上 Disable cache 才正常，几个用户也反馈页面没变。

cache 就是存一份先用着

浏览器、代理服务器、CDN 都会把响应存下来，下次请求直接拿本地那份，省流量也快。缓存按 URL 区分，参数不同就是另一份。它和 localStorage 不是一回事，后者是 JS 主动写的键值，不会自己过期。

强缓存和协商缓存

响应头 Cache-Control: max-age=3600 表示一小时内不再问服务器，这叫强缓存。Expires 是老写法，按绝对时间算，系统时间不准就会乱。ETag 和 Last-Modified 属于协商缓存，过期后浏览器带 If-None-Match 去问，没变就返回 304，只传头不传内容。

Cache-Control: public, max-age=31536000, immutable

前端发布怎么避开旧缓存

  • 文件名带哈希：app.3f2a1c.css，内容变文件名就变
  • 入口文件不缓存：index.html 设 no-cache，让它每次都问
  • 强制刷新：Ctrl+F5 跳过缓存，普通 F5 不一定
  • CDN 刷新：推完代码刷目录，别只刷首页

哪些缓存容易漏

Service Worker 会在浏览器里再存一层，改了策略要更新版本号。APP 内嵌网页有自己的 WebView 缓存，清系统缓存才生效。公司代理和运营商透明缓存也可能返回旧内容，换网络一试就知道。

什么时候该清缓存

登录状态异常、接口返回旧数据、样式错乱，可以先清一次试试。但清缓存不是万能药，接口数据要走自己的缓存策略，别把问题都推给浏览器。用户端能做的，是让发布流程不依赖用户手动清。

静态资源长缓存，入口文件短缓存，这个组合最省事。改完看不到效果，先看响应头，再怀疑代码。