HTTP 缓存入门 为什么有的网页第二次打开特别快

有些网页第一次打开要等半天，第二次点开却瞬间出现，差别就在于浏览器把上次下载的图片、样式和脚本存了下来，这套机制叫 HTTP 缓存。用好了能大幅提速省流量，用错了就会出现明明改了页面、用户还看着旧版的经典事故。本文讲清强缓存和协商缓存两种方式、哪类文件该缓存多久，以及改版后用户看不到新页面该怎么救。

先把道理一句话讲透：如果每次打开网页，几十张图片和样式文件都要从服务器重新下载，再快的网也得等。缓存的思路是让浏览器把这些文件在本地存一份，下次用到先看自己手边有没有、还能不能用，能用就直接拿出来，连服务器的门都不用敲。第二次打开快，快的就是这部分。
第一种方式叫强缓存。服务器在把文件发给浏览器时，会在响应里附一句保质期，比如 Cache-Control: max-age=86400，意思是这份文件 24 小时内放心用。期限之内，浏览器根本不会联系服务器，直接用本地的，所以最快。它的副作用也在这：期限还没到，你在服务器上把文件改了，用户那边照样看旧的，因为人家压根没来问。
第二种方式叫协商缓存，是给强缓存兜底的。等保质期过了，浏览器不会直接下载，而是拿着上次存下的凭证去服务器问一句变了没有。凭证有两种：ETag 是按文件内容算的指纹，内容变一指纹就变；Last-Modified 是上次修改时间。服务器比对后没变化，只回一个 304 状态码和空内容，浏览器继续用本地那份，成本只是一个来回的小请求；真变了，才老老实实回 200 把新文件发下来。省的是流量，验的是新鲜。
哪类文件该怎么缓存，有个现成的分法。图片、CSS、JS 这类体积大又不常变的，放心给长保质期，但要配一招：文件名里带版本号或者内容指纹，比如 app.20261224.js，改版时文件名跟着变，浏览器看到新名字自然会去下载，旧缓存作废得干干净净。HTML 页面和接口数据则相反，要么只给很短的保质期，要么干脆设成每次都先问服务器。顺带分清两个词：no-cache 不是不缓存，是每次用之前先问一句；no-store 才是真的什么都不存，涉及隐私的页面用后者。
落地上，这些规则大多在 Nginx 配置或 CDN 后台里按文件类型统一设置，比如图片目录给 30 天、JS 和 CSS 给 7 天、HTML 不缓存。设置完别凭感觉，用浏览器开发者工具的网络面板打开页面看几眼：每个文件后面标着是 from memory cache、from disk cache 还是 304，一目了然，和预期对不对得上当场验证。
最后说那个最常见的事故：改完网站，用户说还是旧页面，你这边看明明是新的。十有八九是强缓存还没到期，又没给文件换名字。救急可以让用户强制刷新，但治本还是前面那招，静态文件一律带版本号。还有一条底线：个人中心、订单这类带用户隐私的页面，千万不要被长缓存留在公共设备上，谁借用那台电脑都能翻出来。缓存是提速的利器，但保质期这根弦，得一直绷着。