HTTP 缓存与性能优化：强缓存、协商缓存与 CDN 联动

# 强制绕过缓存，回源获取最新资源
Cache-Control: no-cache

# 无论本地是否有缓存都回源
Cache-Control: no-store

# 仅接受新鲜度不超过指定秒数的缓存
Cache-Control: max-age=0
Cache-Control: max-stale=3600
Cache-Control: min-fresh=60

# 仅使用本地缓存，不访问网络（离线优先）
Cache-Control: only-if-cached

# curl 中强制回源
curl -H "Cache-Control: no-cache" https://example.com/app.js

# 查看响应中的缓存头
curl -I https://example.com/app.js

# HTTP/1.0 方式：绝对时间
Expires: Wed, 30 Sep 2026 12:00:00 GMT

# HTTP/1.1 方式：相对时间
Cache-Control: max-age=31536000

# 模拟强缓存判定逻辑（Python）
import time

def is_fresh(entry, now_ts):
    """entry 为缓存条目，包含 stored_time 与 max_age"""
    max_age = entry.get("max_age", 0)
    if max_age == 0:
        return False
    age = now_ts - entry["stored_time"]
    return age < max_age

# 首次响应
HTTP/1.1 200 OK
Last-Modified: Thu, 25 Sep 2026 08:30:00 GMT

# 后续请求
If-Modified-Since: Thu, 25 Sep 2026 08:30:00 GMT

# 未修改 → 304
HTTP/1.1 304 Not Modified

# 首次响应
HTTP/1.1 200 OK
ETag: "e6d8a1b2-5f3c-9a1b-c4d5e6f7a8b9"
Content-Type: application/javascript
Content-Length: 13318

# 后续请求
If-None-Match: "e6d8a1b2-5f3c-9a1b-c4d5e6f7a8b9"

# 未修改 → 304，无响应体
HTTP/1.1 304 Not Modified

// Go 服务端生成强 ETag（基于内容哈希）
func makeETag(content []byte) string {
    h := sha256.New()
    h.Write(content)
    sum := h.Sum(nil)
    return fmt.Sprintf("\"%x\"", sum[:16])
}

// 条件请求处理
func handler(w http.ResponseWriter, r *http.Request) {
    data, _ := os.ReadFile(r.URL.Path)
    etag := makeETag(data)

    if r.Header.Get("If-None-Match") == etag {
        w.WriteHeader(http.StatusNotModified)
        return
    }
    w.Header().Set("ETag", etag)
    w.Write(data)
}

# 只能被浏览器缓存，CDN 不得存储
Cache-Control: private, max-age=3600

# 可被 CDN 与浏览器同时缓存
Cache-Control: public, max-age=86400

# 共享缓存使用更短的 s-maxage，浏览器用 max-age
Cache-Control: public, max-age=3600, s-maxage=60

# Nginx 作为共享缓存网关的典型配置
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=api_cache:10m
                 max_size=1g inactive=24h;

server {
    listen 80;
    location /api/ {
        proxy_cache api_cache;
        proxy_cache_key "$scheme$request_method$host$request_uri";

        # 与源站 Cache-Control 联动，忽略 no-cache 等敏感指令需谨慎
        proxy_cache_valid 200 302 10m;
        proxy_cache_valid 404 1m;

        # 回源时带上客户端缓存信息，源站可据此决策
        proxy_pass http://backend;
    }
}

# 常见 CDN 主动失效操作
# 阿里云 / 腾讯云 / Cloudflare 均提供 Purge API 与命令行
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone}/purge_cache" \
  -H "Authorization: Bearer $CF_TOKEN" \
  -d '{"files":["https://example.com/app.js","https://example.com/style.css"]}'

# 正则批量失效
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone}/purge_cache" \
  -H "Authorization: Bearer $CF_TOKEN" \
  -d '{"tags":["release-2026-09"]}'

HTTP/1.1 200 OK
Content-Encoding: gzip
Vary: Accept-Encoding
Cache-Control: public, max-age=86400

# 带指纹的资源，可放心使用极长缓存
HTTP/1.1 200 OK
Cache-Control: public, max-age=31536000, immutable
ETag: "8a3f2b9c-..."

// webpack/vite 输出带内容哈希的文件名
// webpack.config.js
module.exports = {
  output: {
    filename: 'assets/[name].[contenthash:8].js',
    chunkFilename: 'assets/[name].[contenthash:8].chunk.js',
  },
  optimization: {
    runtimeChunk: 'single',  // 运行时单独成块，避免业务变更导致 runtime 缓存失效
  },
};

<!-- index.html 引用带指纹的资源；index.html 本身 short-cache 或 no-cache -->
<script src="/assets/app.8a3f2b9c.js" defer></script>
<link rel="stylesheet" href="/assets/main.c1d4e5f6.css">

location / {
    root /usr/share/nginx/html;
    index index.html;

    # HTML 每次都要校验，拿到最新指纹引用
    location ~ \.html$ {
        add_header Cache-Control "no-cache, must-revalidate";
        etag on;
    }

    # 带指纹的静态资源一年不失效
    location ~* \.(js|css|png|jpg|woff2|svg)$ {
        add_header Cache-Control "public, max-age=31536000, immutable";
    }
}

// Go 中按接口语义设置缓存头
func userProfileHandler(w http.ResponseWriter, r *http.Request) {
    uid := r.URL.Query().Get("uid")

    // 私有数据：仅浏览器缓存 5 分钟，CDN 不缓存
    w.Header().Set("Cache-Control", "private, max-age=300")

    // 公共数据：CDN 缓存 60 秒，浏览器 5 分钟
    // w.Header().Set("Cache-Control", "public, max-age=300, s-maxage=60")
    // w.Header().Set("Vary", "Accept-Encoding")

    // 结构化数据配合 ETag，做条件刷新
    data := fetchUser(uid)
    etag := makeETag(data)
    if r.Header.Get("If-None-Match") == etag {
        w.WriteHeader(http.StatusNotModified)
        return
    }
    w.Header().Set("ETag", etag)
    json.NewEncoder(w).Encode(data)
}

// 前端 SW（Service Worker）层缓存兜底
self.addEventListener('fetch', (event) => {
  const req = event.request;
  if (req.method !== 'GET') return;

  // 先网络、后缓存：保证数据新鲜，离线时回退缓存
  event.respondWith(
    fetch(req)
      .then((res) => {
        const copy = res.clone();
        caches.open('api-v1').then((c) => c.put(req, copy));
        return res;
      })
      .catch(() => caches.match(req))
  );
});

# 发布脚本片段
echo "1. Purge CDN..."
curl -X POST ".../purge_cache" -d '{"files":["https://example.com/index.html"]}'

echo "2. Deploy to origin (rsync)..."
rsync -avz --delete ./dist/ user@origin:/usr/share/nginx/html/

echo "3. Verify..."
curl -s -I https://example.com/app.js | grep -i cache-control