HTTP缓存与CDN缓存配置指南：从原理到实战

一、HTTP缓存：浏览器端的性能优化基石

1.1 缓存机制核心：Cache-Control与Expires

HTTP缓存的核心在于通过响应头控制资源在客户端的存储与复用。Cache-Control是现代浏览器优先解析的字段，其常用指令包括：

max-age=3600：资源有效期为3600秒（1小时），期间浏览器直接使用本地缓存。
public：允许中间代理（如CDN）缓存响应。
private：仅限终端用户浏览器缓存，禁止代理缓存。
no-cache：强制每次请求向服务器验证缓存有效性（需配合ETag或Last-Modified）。
no-store：完全禁用缓存，适用于敏感数据。

示例：

HTTP/1.1 200 OK
Cache-Control: public, max-age=86400
Expires: Wed, 21 Oct 2025 07:28:00 GMT

说明：Expires为HTTP/1.0遗留字段，优先级低于Cache-Control，但可作为兼容性补充。

1.2 缓存验证：ETag与Last-Modified

当资源过期时，浏览器通过If-None-Match（ETag）或If-Modified-Since（Last-Modified）发起条件请求：

ETag：服务器生成的唯一资源标识符（如哈希值），精度高于时间戳。
Last-Modified：资源最后修改时间，可能因服务器时钟同步问题导致误判。

优化建议：

静态资源（如JS/CSS）优先使用ETag，动态内容（如API响应）可结合Last-Modified。
避免频繁修改文件内容但不更新ETag，导致缓存失效。

1.3 强制缓存与协商缓存的组合策略

强制缓存：Cache-Control: max-age直接返回本地缓存，无需网络请求。
协商缓存：缓存过期后，通过304状态码减少数据传输量。

典型场景：

首次请求：服务器返回200状态码及完整资源。
缓存期内：浏览器直接使用本地文件。
缓存过期：发送If-None-Match请求，服务器返回304（未修改）或200（新资源）。

二、CDN缓存：全局加速的关键环节

2.1 CDN缓存层级与工作原理

CDN通过边缘节点缓存资源，减少回源请求。其缓存流程如下：

用户请求→就近CDN节点。
节点检查缓存→命中则直接返回；未命中则回源到源站。
源站响应→CDN节点缓存资源并设置TTL（Time to Live）。

2.2 CDN缓存配置核心参数

缓存规则：按文件类型（如.js、.css）、路径（如/static/）或自定义规则设置TTL。
忽略参数缓存：对URL查询参数（如?v=1.0）进行忽略或精确匹配。
强制刷新：通过CDN管理后台或API手动清除缓存。

配置示例（某主流CDN平台）：

{
  "rules": [
    {
      "type": "file_extension",
      "extensions": ["js", "css", "png"],
      "ttl": 86400
    },
    {
      "type": "path",
      "path": "/api/data",
      "ttl": 300,
      "ignore_query_string": false
    }
  ]
}

2.3 缓存穿透与雪崩的预防

缓存穿透：恶意请求未缓存的无效资源（如ID=-1的数据）。
解决方案：
- 源站返回空值时设置短TTL（如60秒）。
- 使用布隆过滤器拦截非法请求。
缓存雪崩：大量资源同时过期导致回源洪峰。
解决方案：
- 随机化TTL（如基础值±300秒）。
- 分层缓存（L1边缘节点、L2区域中心）。

三、实战技巧：从配置到监控

3.1 动态资源缓存策略

API响应：设置Cache-Control: no-cache，配合ETag实现高效验证。
HTML页面：通常禁用缓存（no-store），避免内容更新延迟。
HSTS预加载：通过Strict-Transport-Security强制HTTPS，提升安全性。

3.2 监控与调优

日志分析：通过CDN提供的访问日志统计缓存命中率（理想值>80%）。
性能测试：使用WebPageTest或Lighthouse模拟不同地区用户访问。
A/B测试：对比不同TTL设置对带宽节省与内容新鲜度的影响。

3.3 常见问题排查

缓存未生效：检查源站返回的Cache-Control是否被CDN覆盖。
旧版本资源：确保文件名包含哈希值（如style.a1b2c3.css），避免依赖查询参数。
跨域问题：配置CORS头（Access-Control-Allow-Origin）允许缓存跨域资源。

四、进阶优化：HTTP/2与Service Worker

4.1 HTTP/2的缓存改进

多路复用：减少连接建立开销，提升缓存加载效率。
服务器推送：主动推送关联资源（如HTML中引用的CSS），但需谨慎避免过度推送。

4.2 Service Worker的离线缓存

通过JavaScript注册Service Worker，实现更精细的缓存控制：

const CACHE_NAME = 'v1';
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(['/style.css', '/script.js']);
    })
  );
});
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

五、总结：构建高效缓存体系的五大原则

分层设计：浏览器缓存（短周期）→ CDN缓存（中周期）→ 源站缓存（长周期）。
精准控制：根据资源类型（静态/动态）设置差异化的TTL与验证策略。
自动化管理：通过CI/CD流程自动更新资源版本与缓存规则。
监控闭环：建立缓存命中率、回源流量等指标的监控告警机制。
安全兼容：兼顾HTTPS强制、CORS配置等安全需求。

通过系统化的HTTP与CDN缓存配置，可显著降低服务器负载、提升用户访问速度，为高并发场景提供稳定保障。实际部署时，建议结合业务特点进行压测与调优，持续迭代缓存策略。

HTTP与CDN缓存配置全攻略：从原理到实战