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

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

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

但问题是：

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

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

HTTP 缓存的两层机制

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

简单说：

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

csharp 复制代码

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

强缓存：完全不发请求

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

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

控制强缓存的响应头：

http 复制代码

# 方式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

两者区别：

类型	存储位置	速度	什么时候用
memory cache	内存	最快	当前会话、小文件、频繁访问的资源
disk cache	硬盘	稍慢	跨会话、大文件

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

协商缓存：问一下服务器

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

有两种验证方式：

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

基于内容哈希：

http 复制代码

# 第一次请求，服务器返回
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 复制代码

# 第一次请求，服务器返回
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 秒内改多次，检测不到
时间可能不准 - 服务器时间、部署时间等问题
只看时间不看内容 - 文件内容没变但时间变了，也会重新下载

不同资源该用什么策略？

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

http 复制代码

Cache-Control: max-age=31536000, immutable

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

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

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

HTML 文件

http 复制代码

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

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

API 接口

根据数据特性选择：

http 复制代码

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

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

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

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

常见问题排查

改了文件，浏览器没反应

原因：强缓存还没过期。

解决方案：

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

用了 ?v=1.0 还是不行

html 复制代码

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

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

正确做法：

html 复制代码

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

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

CDN 缓存了旧文件

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

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

解决方案：

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

Nginx 配置参考

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 面板：

看到什么	缓存类型	含义
200 + `(disk cache)`	强缓存	从硬盘读取
200 + `(memory cache)`	强缓存	从内存读取
304 Not Modified	协商缓存	服务器说没变
200 + 正常大小	无缓存	重新下载

一句话总结

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

如果你觉得这篇文章有帮助，欢迎关注我的 GitHub，下面是我的一些开源项目：

Claude Code Skills （按需加载，意图自动识别，不浪费 token，介绍文章）：

code-review-skill - 代码审查技能，覆盖 React 19、Vue 3、TypeScript、Rust 等约 9000 行规则（详细介绍）
5-whys-skill - 5 Whys 根因分析，说"找根因"自动激活
first-principles-skill - 第一性原理思考，适合架构设计和技术选型

全栈项目（适合学习现代技术栈）：

prompt-vault - Prompt 管理器，用的都是最新的技术栈，适合用来学习了解最新的前端全栈开发范式：Next.js 15 + React 19 + tRPC 11 + Supabase 全栈示例，clone 下来配个免费 Supabase 就能跑
chat_edit - 双模式 AI 应用（聊天+富文本编辑），Vue 3.5 + TypeScript + Vite 5 + Quill 2.0 + IndexedDB