设置HTTP缓存主要通过配置服务器响应头来控制浏览器和代理服务器如何缓存资源。以下是详细的步骤和策略：

一、核心HTTP缓存头

1.Cache-Control（优先级最高）

常用指令：

max-age=秒：资源缓存的最大时间（如max-age=31536000表示1年）。
public：允许所有中间代理和浏览器缓存资源。
private：仅允许浏览器缓存，禁止代理服务器缓存（适合用户私有数据）。
no-cache：每次需向服务器验证资源是否过期（配合ETag或Last-Modified使用）。
no-store：完全禁止缓存（用于敏感数据）。
must-revalidate：过期后必须重新验证。

示例：

Cache-Control: public, max-age=31536000

2.Expires（旧方法，建议与Cache-Control共存）

指定资源的绝对过期时间（需确保服务器时间准确）：

Expires: Wed, 21 Oct 2025 07:28:00 GMT

3.验证缓存头（协商缓存）

ETag：服务器生成的资源唯一标识（如哈希值）：

ETag: "33a64df551425fcc55e4d42a148795d9"

Last-Modified：资源最后修改时间：

Last-Modified: Tue, 15 Nov 2022 12:45:26 GMT

二、不同资源的缓存策略

1.静态资源（CSS/JS/图片）

长期缓存（文件名带哈希版本号）：

Cache-Control: public, max-age=31536000, immutable

2.动态内容（HTML/API响应）

短时间缓存或禁用缓存：

Cache-Control: no-cache, max-age=0

3.用户私有数据（如个人中心页面）

禁止代理缓存：

Cache-Control: private, max-age=3600

三、服务器配置示例

1.Nginx配置

# 静态资源（图片/CSS/JS）
location ~* \.(jpg|jpeg|png|gif|css|js)$ {
  expires 365d;
  add_header Cache-Control "public, max-age=31536000, immutable";
}

# HTML文件
location / {
  add_header Cache-Control "no-cache, max-age=0";
}

2.Apache配置（.htaccess）


  Header set Cache-Control "public, max-age=31536000, immutable"



  Header set Cache-Control "no-cache, max-age=0"

3.Node.js（Express框架）

// 静态资源
app.use(express.static('public', {
  maxAge: '1y',
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      res.set('Cache-Control', 'no-cache, max-age=0');
    }
  }
}));

四、调试与验证

浏览器开发者工具
在Network标签页查看响应头中的Cache-Control、ETag等字段。
检查资源是否来自disk cache或memory cache。
cURL命令

curl -I http://example.com/asset.js

缓存清除测试
修改资源内容后，通过更改文件名或URL参数（如/asset.js?v=2）强制更新。

五、最佳实践

版本化文件名
使用哈希值命名静态资源（如main.a1b2c3.js），避免更新后缓存冲突。
分级缓存策略
结合CDN缓存（如设置CDN的Cache-Control为1年，源站设置为短时间）。
协商缓存兜底
即使设置max-age，也应保留ETag或Last-Modified，确保资源更新后能及时生效。

通过合理配置HTTP缓存，可显著提升网站加载速度并降低服务器负载。建议根据资源类型和更新频率灵活调整策略。

如何设置HTTP缓存