精华浏览器缓存策略：强缓存与协商缓存怎么配

前端性能优化里性价比最高的一环，就是别让浏览器重复下载。

强缓存：连请求都不发

Cache-Control: max-age=31536000

一年内直接用本地副本，不发请求。

适合：带内容 hash 的静态资源（app.a1b2c3.js），内容一变文件名就变，可以放心设一年。

协商缓存：发请求，但可能不下载

Cache-Control: no-cache
ETag: "abc123"

浏览器发请求带 If-None-Match，服务器比对后返回 304，body 为空。

适合：HTML 入口文件，内容随时变但要保证用户拿到最新。

三个容易搞混的指令

• no-cache：可以缓存，但每次要问服务器（名字最误导人）
• no-store：完全不缓存，敏感数据用这个
• must-revalidate：过期后必须问服务器，不能用过期副本

Nginx 实战配置

# 带 hash 的 JS/CSS：一年强缓存
location ~* \.[a-f0-9]{8}\.(js|css)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
}
# HTML 入口：每次协商
location = /index.html {
    add_header Cache-Control "no-cache";
}

配套要点：静态资源必须带内容 hash 才能用长缓存，
否则你改了代码，用户看到的还是旧的。

no-cache 不是「不缓存」这个点，我面试被问过两次都答错了。
记住它是「每次要问服务器」，而 no-store 才是真不存。