改了CSS刷新没反应-你可能不懂HTTP缓存

做前端的应该都遇到过这种情况：明明改了 CSS，浏览器里看到的还是旧样式。网上搜一下，告诉你"清缓存"，Ctrl+F5 一刷新就好了。

但问题是：

• 缓存到底是怎么工作的？
• 为什么有时候会用缓存，有时候不会？
• Network 面板里的 (disk cache) 和 304 Not Modified 有什么区别？

今天把这个问题彻底搞清楚。

#HTTP 缓存的两层机制

浏览器缓存分两层：强缓存和协商缓存。

简单说：

• 强缓存：直接用本地缓存，不问服务器
• 协商缓存：问一下服务器"我这个还能用吗？“服务器说"能”，就用缓存

复制浏览器想请求资源
    │
    ▼
检查本地缓存
    │
    ├── 有缓存且没过期 → 强缓存命中 → 返回 200 (from cache)
    │
    └── 没缓存 / 过期了
            │
            ▼
        发请求给服务器，带上验证信息
            │
            ├── 服务器说没变 → 协商缓存命中 → 返回 304
            │
            └── 服务器说变了 → 返回 200 + 新资源

#强缓存：完全不发请求

强缓存命中时，浏览器直接从本地拿资源，Network 面板会显示：

• Size 列：(disk cache) 或 (memory cache)
• Time 列：0ms 或很小的数字

控制强缓存的响应头：

复制# 方式1：Cache-Control（推荐）
Cache-Control: max-age=31536000

# 方式2：Expires（老方式，优先级低于 Cache-Control）
Expires: Wed, 21 Oct 2025 07:28:00 GMT

max-age=31536000 意思是"这个资源 31536000 秒（一年）内有效"。

#memory cache vs disk cache

两者区别：

关了浏览器 Tab，memory cache 就没了，disk cache 还在。

#协商缓存：问一下服务器

当强缓存过期（或被设置为 no-cache），浏览器会发请求给服务器验证资源是否变化。

有两种验证方式：

#方式1：ETag / If-None-Match（推荐）

基于内容哈希：

复制# 第一次请求，服务器返回
HTTP/1.1 200 OK
ETag: "abc123"
Cache-Control: no-cache

# 后续请求，浏览器带上 If-None-Match
GET /style.css HTTP/1.1
If-None-Match: "abc123"

# 如果内容没变，服务器返回
HTTP/1.1 304 Not Modified
ETag: "abc123"

# 如果内容变了，服务器返回
HTTP/1.1 200 OK
ETag: "xyz789"
[新的文件内容]

#方式2：Last-Modified / If-Modified-Since

基于修改时间：

复制# 第一次请求，服务器返回
HTTP/1.1 200 OK
Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT

# 后续请求，浏览器带上 If-Modified-Since
GET /style.css HTTP/1.1
If-Modified-Since: Wed, 21 Oct 2024 07:28:00 GMT

# 如果文件没改过，服务器返回 304

#ETag vs Last-Modified

优先用 ETag，因为 Last-Modified 有问题：

1. 精度只到秒 - 1 秒内改多次，检测不到
2. 时间可能不准 - 服务器时间、部署时间等问题
3. 只看时间不看内容 - 文件内容没变但时间变了，也会重新下载

#不同资源该用什么策略？

#静态资源（JS/CSS/图片）

复制Cache-Control: max-age=31536000, immutable

配合文件名哈希：app.abc123.js

内容变了 → 文件名变了 → 请求新文件，老文件继续用缓存。

这是现代前端打包工具（Webpack、Vite）的标准做法。

#HTML 文件

复制Cache-Control: no-cache
ETag: "page-v1"

no-cache 不是"不缓存"，而是"每次都要验证"。HTML 文件要保证用户能拿到最新版本，否则会引用旧的 JS/CSS 文件名。

#API 接口

根据数据特性选择：

复制# 几乎不变的数据（如配置）
Cache-Control: max-age=3600

# 实时性要求高的数据
Cache-Control: no-cache

# 敏感数据（不要缓存）
Cache-Control: no-store

no-store 才是真正的"不缓存"，连验证都不做。

#常见问题排查

#改了文件，浏览器没反应

原因：强缓存还没过期。

解决方案：

1. 开发环境 - 打开 DevTools，勾选 “Disable cache”
2. 生产环境 - 用文件名哈希，别用 ?v=1.0 这种

#用了 ?v=1.0 还是不行

复制<link rel="stylesheet" href="/css/style.css?v=1.0">

问题：有些 CDN 会忽略查询参数，或者浏览器缓存策略不一致。

正确做法：

复制<link rel="stylesheet" href="/css/style.abc123.css">

让打包工具自动生成哈希，内容变了文件名才变。

#CDN 缓存了旧文件

部署了新版本，但用户还是拿到旧文件。

原因：CDN 节点还在缓存期内。

解决方案：

1. 部署时清除 CDN 缓存
2. 用文件名哈希（CDN 会认为是新文件）

#Nginx 配置参考

复制# 静态资源长期缓存
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# HTML 文件协商缓存
location ~* \.html$ {
    add_header Cache-Control "no-cache";
    etag on;
}

# API 不缓存
location /api/ {
    add_header Cache-Control "no-store";
}

#快速判断缓存类型

打开 DevTools Network 面板：

#一句话总结

• 强缓存：不问服务器，直接用。适合长期不变的静态资源。
• 协商缓存：问服务器，没变就用缓存。适合需要保持最新的内容。
• 文件名哈希：解决缓存更新问题的银弹。