HTTP 缓存机制

HTTP 缓存首部字段
├── 强缓存
│   ├── Expires（响应，HTTP/1.0，绝对时间）
│   └── Cache-Control（通用，HTTP/1.1，相对时间 + 多种指令）
└── 协商缓存
    ├── Last-Modified / If-Modified-Since（响应/请求，基于修改时间）
    └── ETag / If-None-Match（响应/请求，基于内容标识）

Expires: Wed, 11 May 2029 16:12:18 GMT

Cache-Control: max-age=31536000, s-maxage=3600, public
Cache-Control: no-cache
Cache-Control: max-age=0, must-revalidate

强缓存是否新鲜 = 缓存新鲜度 > 缓存使用期

缓存新鲜度 = max-age || (expires - date)

缓存使用期 = 响应使用期 + 传输延迟时间 + 停留缓存时间

apparent_age = max(0, response_time - date_value)
响应使用期 = max(apparent_age, age_value)

传输延迟时间 = response_time - request_time

停留缓存时间 = now - response_time

1. 浏览器发起请求
2. 强缓存未命中（过期或 no-cache）
3. 浏览器携带缓存标识（If-Modified-Since / If-None-Match）向服务器请求
4. 服务器判断资源是否更新
   ├── 未更新 → 304 Not Modified → 浏览器从缓存读取
   └── 已更新 → 200 OK + 新资源 → 浏览器更新缓存

# 响应头
Last-Modified: Fri, 14 May 2021 17:23:13 GMT

# 请求头（后续请求携带）
If-Modified-Since: Fri, 14 May 2021 17:23:13 GMT

# 响应头
ETag: "29322-09SpAhH3nXWd8KIVqB10hSSz66"

# 请求头（后续请求携带）
If-None-Match: "29322-09SpAhH3nXWd8KIVqB10hSSz66"

ETag: W/"29322-09SpAhH3nXWd8KIVqB10hSSz66"

date: Thu, 02 Sep 2021 13:28:56 GMT
age: 10467792
cache-control: public
last-modified: Mon, 26 Apr 2021 09:56:06 GMT

缓存新鲜度 = max(0, (date - last-modified)) × 10%

资源请求开始
    │
    ▼
┌─────────────────┐
│ Cache-Control   │── no-store ──→ 直接请求服务器，不缓存
│ 是否为 no-store？│
└────────┬────────┘
         │ 否
         ▼
┌─────────────────┐
│ Cache-Control   │── no-cache ──→ 进入协商缓存
│ 是否为 no-cache？│
└────────┬────────┘
         │ 否
         ▼
┌─────────────────────┐
│ 强缓存是否过期？      │── 未过期 ──→ 200 (from cache) ✓
│ (max-age/s-maxage)  │
└────────┬────────────┘
         │ 已过期
         ▼
┌─────────────────────┐
│ 协商缓存：           │
│ ETag / Last-Modified │── 304 ──→ 从缓存读取 ✓
│ 向服务器验证         │── 200 ──→ 返回新资源并更新缓存
└─────────────────────┘

# HTML 文件：强缓存立即失效，走协商缓存
Cache-Control: max-age=0
Last-Modified: Sat, 04 Sep 2021 08:59:40 GMT

// webpack 配置
output: {
  filename: 'js/[name].[hash:8].js',
}

output: {
  filename: 'js/[name].[chunkhash:8].js',
}
plugins: [
  new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: ... }),
  new webpack.optimize.CommonsChunkPlugin({ name: 'runtime', chunks: ['vendor'] })
]

plugins: [
  new ExtractTextPlugin({ filename: 'css/[name].[contenthash:8].css' })
]

Vary: Accept-Encoding
Vary: Accept-Encoding, User-Agent
Vary: *

// ❌ 错误：Vary 设置过多导致缓存命中率极低
Vary: User-Agent, Accept-Language, Cookie

// ✅ 正确：只按必要的维度区分
Vary: Accept-Encoding

// ❌ 错误：移动端适配用 Vary: User-Agent
// User-Agent 有上千种变体，会导致缓存碎片化
// ✅ 正确：使用单独的 URL（如 m.example.com）或 SSR 动态检测

# CDN 友好的缓存头配置
Cache-Control: public, max-age=60, s-maxage=86400
# 浏览器缓存 60 秒，CDN 缓存 1 天
# 浏览器 60 秒后协商缓存，CDN 1 天内直接返回

// 1. URL 变更（最可靠）
// 修改文件 hash → 新 URL → CDN 视为新资源
/app.[contenthash:8].js

// 2. 主动刷新 API（CDN 服务商提供）
// 阿里云 CDN
await cdnClient.refreshObjectCaches({
  ObjectPath: 'https://cdn.example.com/js/app.js',
  ObjectType: 'File'   // File | Directory
})

// 3. Cache-Control: no-cache
// CDN 收到带 no-cache 的请求会回源验证

server {
    listen 80;
    server_name static.example.com;

    # 静态资源：长期强缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
        root /var/www/static;
        expires 1y;                          # 等价于 Cache-Control: max-age=31536000
        add_header Cache-Control "public, immutable";
        add_header Vary "Accept-Encoding";
        access_log off;                      # 静态资源不写日志
    }

    # HTML 文件：协商缓存
    location ~* \.html$ {
        root /var/www/static;
        add_header Cache-Control "no-cache";
        # Nginx 自动处理 If-Modified-Since / If-None-Match
    }
}

# 缓存路径配置
proxy_cache_path /var/cache/nginx
    levels=1:2                    # 两级目录结构
    keys_zone=api_cache:10m      # 共享内存区域，10MB 存储键
    max_size=1g                   # 磁盘最大 1GB
    inactive=60m                  # 60 分钟无访问则删除
    use_temp_path=off;            # 避免跨磁盘复制

server {
    location /api/ {
        proxy_cache api_cache;
        proxy_cache_key "$scheme$request_method$host$request_uri";
        proxy_cache_valid 200 10m;       # 200 响应缓存 10 分钟
        proxy_cache_valid 404 1m;        # 404 缓存 1 分钟
        proxy_cache_valid any 5m;        # 其他状态码缓存 5 分钟
        proxy_cache_use_stale error timeout updating;  # 回源失败时使用过期缓存
        add_header X-Cache-Status $upstream_cache_status;  # HIT/MISS/EXPIRED
        proxy_pass http://backend;
    }
}

const express = require('express')
const app = express()

// 静态资源：1 年强缓存
app.use('/static', express.static('public', {
  maxAge: '1y',               // Cache-Control: max-age=31536000
  immutable: true,            // 追加 immutable 指令
  etag: true,                 // 启用 ETag（默认开启）
  lastModified: true,         // 启用 Last-Modified（默认开启）
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // HTML 文件：协商缓存
      res.set('Cache-Control', 'no-cache')
    } else {
      // 其他资源：强缓存 + Vary
      res.set('Vary', 'Accept-Encoding')
    }
  }
}))

const Koa = require('koa')
const conditional = require('koa-conditional-get')
const etag = require('koa-etag')

const app = new Koa()

// 协商缓存中间件（必须在路由之前）
app.use(conditional())
app.use(etag())

// API 缓存策略
app.use(async (ctx, next) => {
  await next()

  // 只对 GET 请求设置缓存
  if (ctx.method === 'GET') {
    const config = getCacheConfig(ctx.url)

    if (config && ctx.status < 400) {
      const directives = []

      // 根据接口类型设置缓存策略
      if (config.type === 'static') {
        directives.push(`max-age=${config.maxAge}`) // 静态数据：强缓存
      } else {
        directives.push('no-cache') // 动态数据：协商缓存
        if (config.mustRevalidate) directives.push('must-revalidate')
        ctx.set('Cache-Control', directives.join(', '))
      }
    }
  }
})

const crypto = require('crypto')

function generateETag(content, encoding = 'utf-8') {
  // 强 ETag：基于内容 hash
  const hash = crypto
    .createHash('sha256')
    .update(content, encoding)
    .digest('base64')

  return `"${hash}"`
}

// 弱 ETag：基于内容大小 + hash 前缀
function generateWeakETag(content) {
  return `W/${generateETag(content)}`
}

// 手动设置协商缓存响应头
function setConditionalHeaders(ctx, content) {
  ctx.set('ETag', generateETag(content))
  ctx.set('Cache-Control', 'no-cache')
}

// 响应拦截中间件：为响应自动添加 ETag
function etagMiddleware() {
  return function (req, res, next) {
    const originalEnd = res.end

    res.end = function (data, encoding) {
      // 为响应内容生成 ETag
      if (!res.getHeader('ETag') && data) {
        res.setHeader('ETag', generateETag(data.toString()))
      }
      originalEnd.call(this, data, encoding)
    }

    next()
  }
}

# 1. 查看完整缓存头
curl -I https://example.com/app.js

# 2. 模拟协商缓存请求
curl -H 'If-None-Match: "abc123"' -I https://example.com/app.js

# 3. 强制跳过缓存
curl -H 'Cache-Control: no-cache' https://example.com/app.js

# 4. 查看 CDN 缓存状态
curl -I https://cdn.example.com/app.js | grep X-Cache