一、HTTP缓存机制详解：从原理到配置

HTTP缓存的核心目标是通过减少重复请求，降低服务器负载并提升用户访问速度。其实现依赖两个关键响应头：Cache-Control和ETag/Last-Modified。

1.1 Cache-Control指令配置

Cache-Control是HTTP/1.1引入的缓存控制标准，其常用指令包括：

max-age：定义资源有效时间（秒），如Cache-Control: max-age=3600表示1小时内直接使用缓存。
public/private：public允许中间节点（如CDN）缓存，private仅限用户终端缓存。
no-cache/no-store：no-cache要求每次验证缓存有效性，no-store禁止任何缓存。

配置示例：

# 静态资源（如CSS/JS）配置
Cache-Control: public, max-age=31536000, immutable
# 动态API响应配置
Cache-Control: no-cache, must-revalidate

关键原则：

长期不变的静态资源（如库文件）应设置超长max-age并标记immutable。
动态内容需禁用缓存或启用验证机制。

1.2 验证机制：ETag与Last-Modified

当缓存过期时，浏览器会通过以下方式验证资源是否更新：

ETag：服务器生成的唯一资源标识符，通过If-None-Match头验证。
Last-Modified：资源最后修改时间，配合If-Modified-Since使用。

Nginx配置示例：

location ~* \.(js|css|png)$ {
    add_header ETag "$host-$uri-$date_gmt";
    expires 1y;
}

性能优化点：ETag比Last-Modified更精确，尤其适合频繁修改但内容未变的资源。

二、CDN缓存策略：从节点配置到边缘规则

CDN通过分布式节点缓存缩短用户访问路径，其配置需重点关注缓存规则、刷新机制与回源策略。

2.1 缓存规则配置

主流CDN（如Cloudflare、AWS CloudFront）均支持基于路径、文件类型的缓存策略：

默认缓存时间：建议静态资源设为1年，动态内容设为0秒。
查询字符串处理：
- Ignore query string：所有查询参数忽略，适合不变资源。
- Cache key based on query string：按参数缓存，适合分页数据。

CloudFront规则示例：

{
    "PathPattern": "*.jpg",
    "MinTTL": 86400,
    "MaxTTL": 31536000,
    "DefaultTTL": 604800
}

2.2 缓存刷新与预热

手动刷新：通过CDN控制台或API清除特定URL缓存。
自动刷新：结合CI/CD流程，在部署后触发刷新。
预热：提前将资源推送至边缘节点，避免首次访问延迟。

API调用示例（CloudFront）：

import boto3
client = boto3.client('cloudfront')
response = client.create_invalidation(
    DistributionId='E1234567890',
    InvalidationBatch={
        'Paths': {
            'Quantity': 1,
            'Items': ['/images/*']
        },
        'CallerReference': str(time.time())
    }
)

2.3 回源优化

源站设置：确保源站支持HTTP/2和Keep-Alive。
重试策略：配置回源失败时的重试次数与间隔。
压缩传输：启用Gzip或Brotli压缩减少传输量。

Nginx源站配置：

server {
    gzip on;
    gzip_types text/css application/javascript image/svg+xml;
    keepalive_timeout 75s;
}

三、常见问题与解决方案

3.1 缓存不一致问题

场景：用户看到旧版页面，但开发者已更新。
解决方案：

使用版本化文件名（如style.v2.css）。
配置CDN的Cache-Control: no-cache并强制验证。
部署后执行全局缓存刷新。

3.2 动态内容缓存

场景：API响应需要个性化但希望部分缓存。
解决方案：

使用Vary头区分缓存版本：
```
Vary: Accept-Encoding, User-Agent
```
CDN边缘计算：在节点层动态修改响应（需CDN支持）。

3.3 移动端适配缓存

场景：移动端与PC端资源不同但URL相同。
解决方案：

配置Vary: User-Agent。
使用响应式设计+媒体查询替代多版本资源。

四、性能监控与调优

4.1 监控指标

缓存命中率：目标>90%。
回源流量：占比应<10%。
TTL合规率：确保资源按配置时间缓存。

4.2 工具推荐

Real User Monitoring (RUM)：通过JavaScript收集真实用户缓存行为。
CDN日志分析：使用ELK或S3+Athena分析访问日志。
Lighthouse审计：集成缓存策略检查。

五、进阶配置技巧

5.1 Service Worker缓存

对于PWA应用，可通过Service Worker实现更精细的缓存控制：

const CACHE_NAME = 'v1';
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME).then(cache => {
            return cache.addAll(['/', '/styles/main.css']);
        })
    );
});

5.2 HTTP/2推送

通过Link头预加载关键资源：

Link: </styles/main.css>; rel=preload; as=style

六、总结与最佳实践

分层缓存：浏览器缓存（秒级）→ CDN边缘（分钟级）→ 源站（长期）。
版本控制：静态资源必须带版本号或哈希值。
自动化：将缓存配置纳入CI/CD流程。
监控闭环：建立缓存性能基线，持续优化。

通过系统化的HTTP与CDN缓存配置，可显著提升网站性能。实际部署时，建议先在小流量环境验证策略，再逐步扩大范围。

HTTP与CDN缓存配置全攻略：提升性能的实战指南