打开一个网页，有时候快得像按了快进键，有时候却要等半天。你可能以为是网速问题，其实背后有一套看不见的规则在起作用——HTTP缓存机制。
什么是HTTP缓存
浏览器访问一个页面时，并不总是重新下载所有资源。图片、CSS、JS这些静态内容，很可能已经被存过一次。下次再访问，浏览器会先看看能不能直接用旧的，这就叫缓存。
比如你常刷的新闻网站，顶部Logo和导航栏几乎不变。每次打开都重新下载？没必要。缓存就是让浏览器“记住”这些东西，省时间也省流量。
缓存怎么决定用不用
服务器说了算。它在响应头里加几个字段，告诉浏览器：“这个资源能缓多久”或者“下次得确认下是不是还一样”。
最常见的两个字段是 Expires 和 Cache-Control。
HTTP/1.1 200 OK\nContent-Type: text/html\nCache-Control: max-age=3600\nExpires: Wed, 04 Dec 2024 12:00:00 GMT这里 max-age=3600 表示这个资源可以缓存1小时。在这期间，浏览器直接从本地读取，连请求都不发给服务器。
协商缓存：当缓存过期后
缓存时间到了，浏览器不会立刻当成废纸扔掉。它会带着上次的“凭证”去问服务器：这资源变了吗？
这个凭证通常是 Last-Modified 或 ETag。
GET /style.css HTTP/1.1\nHost: example.com\nIf-Modified-Since: Tue, 03 Dec 2024 08:00:00 GMT如果服务器发现文件没改，就回个 304 Not Modified，告诉浏览器继续用缓存。数据不用重传，省带宽，也快。
强制刷新和缓存失效
你有没有试过按 Ctrl+F5？这就是强制刷新，跳过本地缓存，重新拉所有资源。开发调试时常用，普通用户偶尔也会这么做，尤其是发现页面“不对劲”的时候。
另外，URL 带参数也能绕开缓存。比如 app.js?v=1.2.3，版本号一变，浏览器当成新文件处理。上线更新时，这种小技巧能让用户立刻用上最新脚本。
开发者该怎么利用缓存
静态资源设置长时间缓存，比如一年：Cache-Control: max-age=31536000，再配合文件名加哈希（如 main.a1b2c3d.js），更新时换名字，老缓存自然失效。
HTML 文件通常设成不缓存或短时间缓存，保证用户能拿到最新的页面结构。
别小看这几行头信息。合理配置，能让页面秒开，服务器压力也小。尤其在移动端，省流量对用户是实打实的友好。