HTTP 缓存：让网页秒开的 “魔法仓库”🔯

wayhome在哪
443 阅读4分钟

想象你每次点外卖都要从零开始买菜、切菜、炒菜，那得多麻烦？但如果有个 “美食仓库”，把你常点的菜提前做好存着，下次下单直接加热就能送上门，效率是不是瞬间拉满？这就是 HTTP 缓存的核心逻辑 —— 把网页资源 “存” 起来，下次访问直接调用，让网页秒开！今天，我们就一起揭开这个 “魔法仓库” 的神秘面纱。

一、HTTP 缓存为什么这么重要？

在网络世界里，每打开一个网页，浏览器都要向服务器发送 HTTP 请求获取数据。小到一张图片，大到整个网页的代码，每次请求都要经过漫长的 “跨洋之旅”（服务器可能远在地球另一端）。如果没有缓存，每刷新一次网页都要重复这个过程，不仅浪费流量，还会让等待时间变得无比漫长。而 HTTP 缓存就像浏览器的 “私人助理”，把常用资源存放在本地，下次访问直接 “掏” 出来，让网页加载速度快到飞起！

二、“三重”缓存

1. 强缓存

强缓存就像你家的冰箱，只要食物没过保质期，就可以直接吃，根本不用问别人。浏览器第一次请求网页时，服务器会在响应头里告诉浏览器：“这个文件可以缓存 X 秒！” 实际开发中，在 Node.js 中使用 Express 框架设置强缓存的代码如下：

const express = require('express');
const app = express();
app.get('/static/image.jpg', (req, res) => {
  // 设置缓存1小时（3600秒）
  res.set('Cache-Control', 'public, max-age=3600');
  res.sendFile(__dirname + '/static/image.jpg');
});
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

上述代码中，Cache-Control: public, max-age=3600 表示该资源可被公共缓存，且缓存有效期为 1 小时。在这个时间内，浏览器再次请求相同资源，直接从本地缓存读取，连服务器都不用打扰，速度快得惊人！

但强缓存也有个小问题：如果服务器上的文件更新了，而缓存还没过期，用户看到的就是旧版本。这时就需要 “协商缓存” 出马了。

2. 协商缓存

协商缓存更像你去朋友家蹭饭，虽然知道冰箱里有存货，但还是会问一句：“这菜过期没？还能吃吗？” 浏览器会带着缓存的 “身份证”（比如Last-Modified或ETag）向服务器发送请求。在 Node.js 中使用 Express 框架实现协商缓存的示例代码如下：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
app.get('/static/file.html', (req, res) => {
  const filePath = path.join(__dirname, 'static', 'file.html');
  const stats = fs.statSync(filePath);
  const lastModified = stats.mtime.toUTCString();
  const etag = '"' + require('crypto').createHash('md5').update(fs.readFileSync(filePath)).digest('hex') + '"';
  const ifModifiedSince = req.headers['if-modified-since'];
  const ifNoneMatch = req.headers['if-none-match'];
  if (ifModifiedSince === lastModified && ifNoneMatch === etag) {
    res.status(304).end();
    return;
  }
  res.set('Last-Modified', lastModified);
  res.set('ETag', etag);
  res.sendFile(filePath);
});
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

在这段代码里，服务器先获取文件的最后修改时间lastModified和唯一标识etag 。当浏览器请求时，会带上if-modified-since和if-none-match ，服务器检查后，如果内容未变，回复304 Not Modified，浏览器就放心地用本地缓存；如果回复200 OK，浏览器才会下载新资源。这样既保证了速度，又避免了看到旧内容。

3. 浏览器缓存

除了强缓存和协商缓存，浏览器自身也有一套缓存策略。比如你关闭网页后重新打开，浏览器可能会优先从内存或磁盘缓存中加载资源，进一步提升速度。不过这些缓存的管理比较复杂，不同浏览器的策略也略有差异。

三、缓存的 “游戏规则”

HTTP 缓存的所有操作，都依赖服务器返回的响应头信息。常见的响应头字段有：

  • Cache-Control：控制强缓存，比如max-age设置缓存时长，no-cache表示不使用强缓存，no-store表示禁止缓存。

  • Expires：老版本的强缓存设置，用绝对时间表示过期时间（现在逐渐被Cache-Control取代）。

  • Last-Modified和ETag：用于协商缓存，前者表示文件最后修改时间，后者是文件的唯一标识（类似指纹）。

浏览器收到这些 “指令” 后，就能精准判断哪些资源该存、该用、该更新。

四、缓存带来的烦恼

虽然缓存好处多多，但也会带来一些问题。比如网站更新了，用户却因为缓存看不到新内容；或者缓存占用大量磁盘空间，拖慢电脑速度。这时，开发者可以通过设置合适的缓存策略（比如缩短缓存时长、强制更新ETag），用户也可以手动清除浏览器缓存，来解决这些问题。

随着 HTTP/3 协议的普及，缓存机制也在不断升级。比如利用 QUIC 协议的特性，缓存验证过程将更加快速安全；边缘计算的发展，让缓存离用户更近，进一步降低延迟。未来，我们的网页访问体验还会变得更快、更流畅！

avatar
文章
阅读
粉丝