浏览器缓存策略优化：从强缓存到协商缓存测试

最近在项目中对前端缓存策略进行了深入测试，发现很多开发者的缓存配置存在误区。今天分享一下我的踩坑经历。

测试环境

本地开发服务器：Node.js + Express
浏览器：Chrome 115
测试文件：main.js (20KB) 和 style.css (5KB)

强缓存测试步骤

首先测试强缓存策略，配置响应头：

app.get('/main.js', (req, res) => {
  res.set({
    'Cache-Control': 'public, max-age=3600', // 1小时
    'Expires': new Date(Date.now() + 3600000).toUTCString()
  });
  res.sendFile(path.join(__dirname, 'main.js'));
});

测试结果： 第一次加载耗时80ms，第二次直接从缓存读取，无网络请求。

协商缓存测试

接着测试协商缓存：

app.get('/style.css', (req, res) => {
  const etag = generateEtag('style.css');
  if (req.headers['if-none-match'] === etag) {
    return res.status(304).end();
  }
  res.set({ 'ETag': etag });
  res.sendFile(path.join(__dirname, 'style.css'));
});

测试结果： 第一次加载50ms，第二次返回304状态码，节省了传输时间。

优化建议

静态资源使用强缓存：JS、CSS等不常变更文件设置长缓存时间
动态资源使用协商缓存：API接口根据内容变化判断是否更新
合理设置缓存头：避免同时设置Cache-Control和Expires导致冲突

实践证明，正确的缓存策略能将页面加载时间减少40-60%！

注意： 一定要在生产环境进行充分测试后再上线缓存策略。

Ulysses841 · 2026-01-08T10:24:58

强缓存配置别只写max-age，还要考虑no-cache的场景，比如资源更新后需要立即生效的情况。

CrazyDance · 2026-01-08T10:24:58

协商缓存用ETag时记得加版本号或哈希值，避免因内容未变但文件名变更导致304失效。

Yvonne276 · 2026-01-08T10:24:58

实际项目中建议用webpack等工具自动生成带hash的文件名，再配合强缓存策略，效果更佳。

Will799 · 2026-01-08T10:24:58

别忽视浏览器开发者工具的Network面板，它能帮你精准定位是强缓存还是协商缓存命中

浏览器缓存策略优化：从强缓存到协商缓存测试