合理使用CDN加速静态资源

CDN加速静态资源的基本原理

CDN（内容分发网络）通过在全球范围内部署边缘节点服务器，将静态资源缓存到离用户更近的位置。当用户请求资源时，CDN会从最近的节点返回内容，而不是从源服务器直接获取。这种分布式架构显著减少了网络延迟，提高了资源加载速度。

典型的CDN工作流程：

1. 用户发起资源请求（如图片、JS、CSS文件）
2. DNS解析将请求路由到最近的CDN节点
3. 如果节点有缓存，直接返回资源
4. 如果没有缓存，CDN从源服务器获取并缓存资源

// 传统资源引用
<script src="/js/main.js"></script>

// 使用CDN后的资源引用
<script src="https://cdn.example.com/js/main.js"></script>

需要优先通过CDN加速的资源类型

并非所有资源都适合通过CDN加速，以下类型特别适合：

1. 图片资源：特别是高分辨率图片、产品展示图等

   <!-- 原图引用 -->
   <img src="/images/product.jpg">
   
   <!-- CDN加速后 -->
   <img src="https://cdn.example.com/images/product.jpg">
   

2. 前端静态文件：

   • JavaScript文件（特别是第三方库）

     <!-- 直接引用jQuery -->
     <script src="/js/jquery.min.js"></script>
     
     <!-- 使用CDN -->
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
     

   • CSS样式表
   • Web字体文件

3. 媒体文件：

   • 视频文件（MP4、WebM等）
   • 音频文件（MP3、WAV等）

4. 下载文件：

   • PDF文档
   • 软件安装包
   • 压缩文件

CDN域名策略与最佳实践

多域名并行加载

浏览器对同一域名有并发请求限制（通常6-8个），使用多个CDN域名可以突破这个限制：

<!-- 使用两个不同CDN域名 -->
<link href="https://cdn1.example.com/css/style.css" rel="stylesheet">
<script src="https://cdn2.example.com/js/app.js"></script>

子域名划分

根据资源类型使用不同的子域名：

static1.example-cdn.com - 用于图片
static2.example-cdn.com - 用于JS/CSS
static3.example-cdn.com - 用于媒体文件

避免cookie污染

专门为静态资源设置无cookie的域名：

# Nginx配置示例
server {
    listen 80;
    server_name static.example.com;
    
    location / {
        # 禁止设置cookie
        add_header Set-Cookie "";
    }
}

缓存控制与版本管理

缓存头设置

合理的缓存策略能极大提升性能：

HTTP/1.1 200 OK
Cache-Control: public, max-age=31536000
Expires: Wed, 21 Oct 2026 07:28:00 GMT
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

文件指纹技术

通过内容hash生成唯一文件名，实现长期缓存：

// webpack配置示例
output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].chunk.js'
}

版本回退机制

当CDN不可用时自动回退到本地资源：

<script src="https://cdn.example.com/js/main.js"></script>
<script>
window.onerror = function() {
    var fallback = document.createElement('script');
    fallback.src = '/js/main.js';
    document.body.appendChild(fallback);
}
</script>

高级CDN优化技巧

智能资源选择

根据网络条件动态加载不同质量的资源：

// 检测网络速度并选择合适质量的图片
function loadAdaptiveImage() {
  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  const img = document.getElementById('product-img');
  
  if (connection) {
    if (connection.effectiveType === '4g') {
      img.src = 'https://cdn.example.com/images/high-quality.jpg';
    } else {
      img.src = 'https://cdn.example.com/images/standard-quality.jpg';
    }
  }
}

预连接与预加载

<!-- 提前建立与CDN的连接 -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

<!-- 预加载关键资源 -->
<link rel="preload" href="https://cdn.example.com/js/main.js" as="script">

边缘计算处理

现代CDN支持在边缘节点进行简单的资源处理：

# 边缘节点图像处理示例
location ~* ^/images/(.*)\.(jpg|png|webp)$ {
    image_filter resize 800 600;
    image_filter_webp_quality 85;
}

监控与性能测量

资源加载监控

// 使用Performance API测量CDN资源加载时间
const resources = performance.getEntriesByType('resource');
resources.forEach(resource => {
  if (resource.name.includes('cdn.example.com')) {
    console.log(`CDN资源 ${resource.name} 加载耗时: ${resource.duration}ms`);
  }
});

实时用户监控(RUM)

// 收集真实用户CDN性能数据
window.addEventListener('load', function() {
  const timing = performance.timing;
  const cdnTiming = timing.responseEnd - timing.domainLookupStart;
  
  // 发送到分析平台
  navigator.sendBeacon('/analytics', {
    type: 'cdn_performance',
    duration: cdnTiming
  });
});

安全与成本考量

HTTPS安全传输

确保所有CDN资源使用HTTPS：

<!-- 不安全的混合内容会触发浏览器警告 -->
<script src="http://cdn.example.com/js/main.js"></script>

<!-- 正确的HTTPS引用 -->
<script src="https://cdn.example.com/js/main.js"></script>

带宽成本优化

1. 启用CDN压缩（Gzip/Brotli）
2. 设置智能缓存规则
3. 使用图片懒加载
4. 实施流量限制策略

# Nginx限流配置
limit_req_zone $binary_remote_addr zone=cdn_zone:10m rate=100r/s;

server {
    location / {
        limit_req zone=cdn_zone burst=50;
    }
}

防盗链措施

防止其他网站盗用你的CDN资源：

location ~* \.(jpg|png|gif|jpeg)$ {
    valid_referers none blocked example.com *.example.com;
    if ($invalid_referer) {
        return 403;
    }
}