同一张图，为什么第二次打开不用再下？

同一个网站，第一次打开图片一张张冒出来，第二次几乎瞬间出现。原因是浏览器缓存（browser cache）：浏览器把下载过的东西在你电脑上存了一份，下次能直接用就不再下载。下面分 6 步讲清楚。

6 步看懂浏览器缓存

1. 第二次为什么快#▶ 从这里看

• 网络和网站都没变，变的是：你电脑里已经有了上次下载的图片、脚本和样式。

2. 第一次去店里买#▶ 从这里看

• 第一次访问，浏览器向服务器（可能经过 CDN 节点和负载均衡）请求每个文件。
• 服务器回应时会附带缓存相关的响应头，告诉浏览器这份东西能不能存、能存多久。¹²
• 浏览器按规则把它存进本地，这块存储就是浏览器缓存。

3. 第二次直接开冰箱#▶ 从这里看

• 再次需要同一个文件时，浏览器先查本地缓存；还「新鲜」就直接用，不发网络请求。
• 区分两者：CDN 是离你近的门店（服务端那边的副本），浏览器缓存是你自己电脑里的副本。

4. 保质期#▶ 从这里看

• 服务器用 Cache-Control: max-age=秒数 告诉浏览器「能放多久」。例如 max-age=3600 表示一小时内都算新鲜。¹³
• 不是每个响应都带 Cache-Control。没带的时候，浏览器在满足一定条件时会按启发式规则自己估一个有效期，这叫启发式缓存（heuristic caching）。²
• 新鲜期内直接用；过了就变成「过期」（stale），一般要先问一声再用。例外：响应带 no-cache 时，没过期也要先确认；带 stale-while-revalidate 时，过期后可以先用旧的，同时在后台确认。
• 经常变的内容（比如网页本身）通常放得短或每次都要确认；几乎不变的图标、字体可以放得很长。

5. 过期了先问一句#▶ 从这里看

• 过期不等于作废。浏览器会带上这份东西的「编号」去问服务器：还是原来那份吗？ 这叫协商缓存（重新验证，revalidation）。²
• 编号常见的是 ETag（服务器给这份内容打的标识），浏览器用 If-None-Match 把它带回去。
• 没变：服务器回 304 Not Modified，意思是「没变」，不带文件内容，浏览器接着用冰箱里的。⁴
• 变了：服务器返回 200 和新文件，浏览器换掉旧的。
• 网站更新时常给文件名加版本或指纹（如 logo.v2.png），新地址必然重新下载，旧缓存自然不再被用到。

6. 回顾#▶ 从这里看

• 浏览器缓存：自家冰箱，最近，能不出门就不出门。
• CDN：附近门店，离你近。
• 负载均衡：店里多开柜台，人多也扛得住。
• 三层叠在一起，网站才能又快又稳。

深入一问

no-cache 是「不缓存」吗？
不是。no-cache 的意思是「可以存，但每次用之前都要先问一句」；真正「不要存」的是 no-store。³

怎么亲眼看到缓存？
打开浏览器开发者工具的「网络」面板，刷新页面，留意某些资源显示「来自磁盘缓存 / 内存缓存」，或状态码 304。

我改了网站，用户为什么还看到旧的？
多半是旧文件还在保质期内。静态文件更新时换带版本号的新文件名，同时更新网页里的引用；网页本身设成 no-cache，每次用前先验证。

易错点

• ❌ 「浏览器缓存就是 CDN」→ ✅ CDN 在服务端那边，缓存在你自己电脑里，两者常一起用。
• ❌ 「过期了就一定重新下载」→ ✅ 先问一句，没变只回 304，不重新传文件。
• ❌ 「no-cache = 不缓存」→ ✅ 那是 no-store；no-cache 是每次先确认。

参考资料