CDN 工作原理

问题

CDN (内容分发网络) 的工作原理与作用。

解答

什么是 CDN

CDN（Content Delivery Network）是一组分布在不同地理位置的服务器集群，将内容缓存到离用户最近的节点，加速资源访问。

工作流程

用户请求 → DNS 解析 → 智能调度 → 边缘节点 → 返回内容
                              ↓
                         缓存未命中
                              ↓
                           回源站

1. DNS 解析

# 用户访问 static.example.com

1. 浏览器查询 DNS
2. DNS 返回 CDN 的 CNAME 记录
3. CDN 的智能 DNS 根据用户 IP 返回最近节点地址

2. 请求处理

// CDN 节点处理逻辑（伪代码）
function handleRequest(request) {
  const cacheKey = generateCacheKey(request.url);
  
  // 检查缓存
  if (cache.has(cacheKey) && !isExpired(cacheKey)) {
    return cache.get(cacheKey); // 缓存命中，直接返回
  }
  
  // 缓存未命中，回源获取
  const response = fetchFromOrigin(request);
  
  // 根据响应头决定是否缓存
  if (isCacheable(response)) {
    cache.set(cacheKey, response, getTTL(response));
  }
  
  return response;
}

3. 缓存控制

# Nginx 配置示例 - 源站设置缓存策略
location /static/ {
    # 静态资源缓存 1 年
    add_header Cache-Control "public, max-age=31536000, immutable";
}

location /api/ {
    # API 不缓存
    add_header Cache-Control "no-store";
}

CDN 的作用

作用	说明
加速访问	用户从最近节点获取资源，减少网络延迟
减轻源站压力	大部分请求由 CDN 节点处理
提高可用性	节点故障自动切换，源站故障仍可提供缓存内容
节省带宽成本	CDN 带宽通常比源站便宜

实际应用

<!-- 使用 CDN 加载静态资源 -->
<script src="https://cdn.example.com/js/app.a1b2c3d4.js"></script>
<link href="https://cdn.example.com/css/style.e5f6g7h8.css" rel="stylesheet">

<!-- 使用公共 CDN -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

// Webpack 配置 CDN 路径
module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/',
    filename: '[name].[contenthash].js'
  }
};

缓存命中率优化

// 文件名加 hash，配合长期缓存
// app.a1b2c3d4.js - 内容变化时 hash 变化，URL 变化，绕过缓存

// 分离不常变化的代码
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

关键点

• 智能 DNS 调度：根据用户 IP、节点负载、网络状况选择最优节点
• 边缘缓存：内容缓存在离用户最近的节点，减少回源
• 缓存策略：通过 Cache-Control、ETag 等 HTTP 头控制缓存行为
• 适用场景：静态资源（JS/CSS/图片/视频），不适合动态接口
• 文件 hash：配合内容 hash 命名实现长期缓存 + 即时更新