CDN加速优化完全指南：从基础原理到高级配置实战

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// CDN节点选择算法示例
class CDNNodeSelector {
  constructor() {
    this.edgeNodes = [
      { region: 'asia', nodes: ['tokyo', 'singapore', 'hongkong'] },
      { region: 'europe', nodes: ['london', 'frankfurt', 'amsterdam'] },
      { region: 'america', nodes: ['virginia', 'oregon', 'sao_paulo'] }
    ];
  }

  async selectOptimalNode(userLocation) {
    const nodeLatencies = await Promise.all(
      this.edgeNodes.flatMap(region =>
        region.nodes.map(node => this.measureLatency(node))
      )
    );

    return nodeLatencies
      .sort((a, b) => a.latency - b.latency)[0]
      .node;
  }

  async measureLatency(node) {
    const startTime = performance.now();
    try {
      await fetch(`https://${node}.cdn.example.com/ping`);
      const endTime = performance.now();
      return { node, latency: endTime - startTime };
    } catch (error) {
      return { node, latency: Infinity };
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// 模拟CDN DNS解析逻辑
const cdnDNS = {
  records: {
    'cdn.example.com': {
      'asia': ['asia1.cdn.example.com', 'asia2.cdn.example.com'],
      'europe': ['eu1.cdn.example.com', 'eu2.cdn.example.com'],
      'america': ['us1.cdn.example.com', 'us2.cdn.example.com']
    }
  },

  resolve(domain, clientIP) {
    const geoLocation = this.getGeoLocation(clientIP);
    const region = this.determineRegion(geoLocation);
    const nodeRecords = this.records[domain][region];

    // 基于负载均衡选择节点
    return this.selectNodeByLoad(nodeRecords);
  },

  getGeoLocation(ip) {
    // 实际应用中会使用GeoIP数据库
    const geoDatabase = {
      '120.0.0.0/8': 'asia',
      '80.0.0.0/8': 'europe',
      '192.0.0.0/8': 'america'
    };

    for (const [range, location] of Object.entries(geoDatabase)) {
      if (this.ipInRange(ip, range)) {
        return location;
      }
    }
    return 'default';
  }
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

// 多级缓存管理器
class CacheManager {
  constructor() {
    this.l1Cache = new Map(); // 浏览器缓存
    this.l2Cache = new Map(); // CDN边缘缓存
    this.l3Cache = new Map(); // 源站缓存
  }

  async get(key) {
    // L1缓存检查
    if (this.l1Cache.has(key)) {
      const item = this.l1Cache.get(key);
      if (!this.isExpired(item)) {
        return item.value;
      }
      this.l1Cache.delete(key);
    }

    // L2缓存检查
    if (this.l2Cache.has(key)) {
      const item = this.l2Cache.get(key);
      if (!this.isExpired(item)) {
        this.l1Cache.set(key, item);
        return item.value;
      }
      this.l2Cache.delete(key);
    }

    // L3缓存检查
    if (this.l3Cache.has(key)) {
      const item = this.l3Cache.get(key);
      if (!this.isExpired(item)) {
        this.l2Cache.set(key, item);
        this.l1Cache.set(key, item);
        return item.value;
      }
      this.l3Cache.delete(key);
    }

    return null;
  }

  set(key, value, ttl = 3600) {
    const cacheItem = {
      value,
      timestamp: Date.now(),
      ttl: ttl * 1000
    };

    this.l3Cache.set(key, cacheItem);
    this.l2Cache.set(key, cacheItem);
    this.l1Cache.set(key, cacheItem);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

// 智能缓存策略配置
const cacheStrategies = {
  // 静态资源 - 长期缓存
  static: {
    match: /\.(css|js|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/i,
    ttl: 31536000, // 1年
    cacheControl: 'public, max-age=31536000, immutable',
    vary: ['Accept-Encoding']
  },

  // API响应 - 短期缓存
  api: {
    match: /^\/api\//,
    ttl: 300, // 5分钟
    cacheControl: 'public, max-age=300, must-revalidate',
    vary: ['Accept', 'Authorization']
  },

  // HTML页面 - 无缓存或极短缓存
  html: {
    match: /\.html$/i,
    ttl: 0,
    cacheControl: 'no-cache, no-store, must-revalidate',
    vary: ['Cookie', 'User-Agent']
  },

  // 媒体文件 - 中期缓存
  media: {
    match: /\.(mp4|webm|mp3|wav|ogg)$/i,
    ttl: 86400, // 1天
    cacheControl: 'public, max-age=86400',
    vary: ['Range']
  }
};

// 应用缓存策略
function applyCacheStrategy(request) {
  for (const [name, strategy] of Object.entries(cacheStrategies)) {
    if (strategy.match.test(request.url)) {
      return {
        'Cache-Control': strategy.cacheControl,
        'Vary': strategy.vary.join(', '),
        'CDN-Cache-TTL': strategy.ttl
      };
    }
  }

  return {
    'Cache-Control': 'public, max-age=3600',
    'Vary': 'Accept-Encoding'
  };
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

// Cloudflare Workers示例 - 图片处理函数
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);

  // 图片处理端点
  if (url.pathname.startsWith('/image/')) {
    return await processImage(request);
  }

  // API代理端点
  if (url.pathname.startsWith('/api/')) {
    return await proxyAPI(request);
  }

  return fetch(request);
}

async function processImage(request) {
  const url = new URL(request.url);
  const imageUrl = url.searchParams.get('url');
  const width = parseInt(url.searchParams.get('width')) || null;
  const height = parseInt(url.searchParams.get('height')) || null;
  const quality = parseInt(url.searchParams.get('quality')) || 80;

  if (!imageUrl) {
    return new Response('Missing image URL', { status: 400 });
  }

  try {
    // 获取原始图片
    const imageResponse = await fetch(imageUrl);
    const imageData = await imageResponse.arrayBuffer();

    // 图片处理
    const processedImage = await sharp(imageData)
      .resize(width, height, { fit: 'cover' })
      .jpeg({ quality })
      .toBuffer();

    return new Response(processedImage, {
      headers: {
        'Content-Type': 'image/jpeg',
        'Cache-Control': 'public, max-age=31536000',
        'CDN-Cache-Tag': 'processed-image'
      }
    });
  } catch (error) {
    return new Response('Image processing failed', { status: 500 });
  }
}

// API代理函数
async function proxyAPI(request) {
  const url = new URL(request.url);
  const backendUrl = `https://api.example.com${url.pathname}${url.search}`;

  try {
    const response = await fetch(backendUrl, {
      method: request.method,
      headers: {
        'Content-Type': 'application/json',
        'Authorization': request.headers.get('Authorization')
      }
    });

    // 缓存GET请求的响应
    if (request.method === 'GET' && response.ok) {
      const data = await response.clone().json();

      return new Response(JSON.stringify(data), {
        status: response.status,
        headers: {
          'Content-Type': 'application/json',
          'Cache-Control': 'public, max-age=300',
          'CDN-Cache-Tag': 'api-response'
        }
      });
    }

    return response;
  } catch (error) {
    return new Response('Backend API error', { status: 502 });
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

// 缓存标签管理系统
class CacheTagManager {
  constructor() {
    this.tags = new Map();
  }

  addTag(key, tags) {
    for (const tag of tags) {
      if (!this.tags.has(tag)) {
        this.tags.set(tag, new Set());
      }
      this.tags.get(tag).add(key);
    }
  }

  invalidateTag(tag) {
    const keys = this.tags.get(tag) || new Set();
    const invalidationPromises = Array.from(keys).map(key =>
      this.invalidateKey(key)
    );

    this.tags.delete(tag);
    return Promise.all(invalidationPromises);
  }

  async invalidateKey(key) {
    // 发送PURGE请求到CDN
    const purgeResponse = await fetch('/cdn-purge', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ keys: [key] })
    });

    return purgeResponse.ok;
  }

  // 内容更新时自动失效相关缓存
  async handleContentUpdate(contentType, contentId) {
    const tags = [
      `${contentType}:${contentId}`,
      `${contentType}:list`,
      'site-wide'
    ];

    for (const tag of tags) {
      await this.invalidateTag(tag);
    }
  }
}

// 使用示例
const cacheManager = new CacheTagManager();

// 内容发布时
cacheManager.addTag('article/123', ['article:123', 'article:list', 'homepage']);

// 更新文章时
await cacheManager.handleContentUpdate('article', 123);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

// DDoS防护中间件
class DDoSProtection {
  constructor() {
    this.requestCounts = new Map();
    this.blockedIPs = new Set();
    this.rateLimits = {
      default: { requests: 100, window: 60000 }, // 100请求/分钟
      api: { requests: 50, window: 60000 },      // 50请求/分钟
      login: { requests: 5, window: 300000 }     // 5请求/5分钟
    };
  }

  middleware() {
    return async (request, response, next) => {
      const clientIP = this.getClientIP(request);
      const path = new URL(request.url).pathname;

      // 检查IP是否被封锁
      if (this.blockedIPs.has(clientIP)) {
        return response.status(429).json({
          error: 'IP address blocked due to suspicious activity'
        });
      }

      // 检查请求频率
      if (!this.checkRateLimit(clientIP, path)) {
        return response.status(429).json({
          error: 'Too many requests'
        });
      }

      // 检查异常行为模式
      if (this.detectAnomalousPattern(request)) {
        await this.suspiciousActivityDetected(clientIP, request);
        return response.status(403).json({
          error: 'Suspicious activity detected'
        });
      }

      next();
    };
  }

  checkRateLimit(ip, path) {
    const now = Date.now();
    const limitType = this.getLimitType(path);
    const limit = this.rateLimits[limitType];

    if (!this.requestCounts.has(ip)) {
      this.requestCounts.set(ip, {
        requests: [],
        blocked: false
      });
    }

    const clientData = this.requestCounts.get(ip);
    clientData.requests = clientData.requests.filter(
      timestamp => now - timestamp < limit.window
    );

    if (clientData.requests.length >= limit.requests) {
      return false;
    }

    clientData.requests.push(now);
    return true;
  }

  detectAnomalousPattern(request) {
    const suspiciousPatterns = [
      // SQL注入检测
      /('|(\\')|(;)|(\-\-)|(\s+(or|and)\s+.+=.+)|(union\s+select)/i,
      // XSS检测
      /(<script|<iframe|javascript:|on\w+\s*=)/i,
      // 路径遍历
      /(\.\.\/|\.\.\\)/,
      // 大量请求参数
      request.url.length > 2000
    ];

    return suspiciousPatterns.some(pattern =>
      pattern.test(request.url) ||
      pattern.test(JSON.stringify(request.headers))
    );
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

// WAF规则引擎
class WAFEngine {
  constructor() {
    this.rules = [
      {
        name: 'SQL Injection',
        pattern: /('|(\\')|(;)|(\-\-)|(\s+(or|and)\s+.+=.+)|(union\s+select)/i,
        action: 'block',
        severity: 'high'
      },
      {
        name: 'XSS Attack',
        pattern: /(<script|<iframe|javascript:|on\w+\s*=)/i,
        action: 'block',
        severity: 'high'
      },
      {
        name: 'Path Traversal',
        pattern: /(\.\.\/|\.\.\\)/,
        action: 'block',
        severity: 'medium'
      },
      {
        name: 'Large Payload',
        condition: (req) => req.headers['content-length'] > 10485760, // 10MB
        action: 'block',
        severity: 'medium'
      },
      {
        name: 'Suspicious User Agent',
        pattern: /(bot|crawler|spider|scraper)/i,
        condition: (req) => !req.headers['user-agent']?.match(/googlebot|bingbot/i),
        action: 'challenge',
        severity: 'low'
      }
    ];

    this.whitelist = [
      '127.0.0.1',
      '::1'
    ];
  }

  evaluate(request) {
    const clientIP = this.getClientIP(request);

    // 跳过白名单IP
    if (this.whitelist.includes(clientIP)) {
      return { action: 'allow', reason: 'whitelisted IP' };
    }

    // 检查所有规则
    for (const rule of this.rules) {
      if (this.matchRule(rule, request)) {
        return {
          action: rule.action,
          rule: rule.name,
          severity: rule.severity
        };
      }
    }

    return { action: 'allow', reason: 'no rules matched' };
  }

  matchRule(rule, request) {
    if (rule.pattern) {
      return rule.pattern.test(request.url) ||
             rule.pattern.test(JSON.stringify(request.headers)) ||
             rule.pattern.test(JSON.stringify(request.body));
    }

    if (rule.condition) {
      return rule.condition(request);
    }

    return false;
  }
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

// CDN性能监控系统
class CDNPerformanceMonitor {
  constructor() {
    this.metrics = {
      latency: [],
      throughput: [],
      errorRate: [],
      cacheHitRate: []
    };

    this.startMonitoring();
  }

  startMonitoring() {
    // 监控页面加载时间
    this.monitorPageLoad();

    // 监控资源加载时间
    this.monitorResourceLoad();

    // 监控API响应时间
    this.monitorAPIResponse();

    // 监控用户体验指标
    this.monitorWebVitals();
  }

  monitorPageLoad() {
    window.addEventListener('load', () => {
      const navigation = performance.getEntriesByType('navigation')[0];

      const metrics = {
        dnsLookup: navigation.domainLookupEnd - navigation.domainLookupStart,
        tcpConnect: navigation.connectEnd - navigation.connectStart,
        sslHandshake: navigation.secureConnectionStart > 0
          ? navigation.connectEnd - navigation.secureConnectionStart
          : 0,
        ttfb: navigation.responseStart - navigation.requestStart,
        download: navigation.responseEnd - navigation.responseStart,
        domParse: navigation.domContentLoadedEventStart - navigation.responseEnd,
        domReady: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
        pageLoad: navigation.loadEventEnd - navigation.loadEventStart
      };

      this.recordMetrics('latency', metrics);
      this.sendMetrics('page_load', metrics);
    });
  }

  monitorResourceLoad() {
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();

      entries.forEach(entry => {
        if (entry.initiatorType === 'resource') {
          const resourceMetrics = {
            name: entry.name,
            type: entry.initiatorType,
            duration: entry.duration,
            size: entry.transferSize,
            cached: entry.transferSize === 0 && entry.decodedBodySize > 0
          };

          this.sendMetrics('resource_load', resourceMetrics);
        }
      });
    });

    observer.observe({ entryTypes: ['resource'] });
  }

  monitorWebVitals() {
    // Largest Contentful Paint (LCP)
    this.observeLCP();

    // First Input Delay (FID)
    this.observeFID();

    // Cumulative Layout Shift (CLS)
    this.observeCLS();
  }

  observeLCP() {
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      const lastEntry = entries[entries.length - 1];

      this.sendMetrics('lcp', {
        value: lastEntry.renderTime || lastEntry.loadTime,
        element: lastEntry.element?.tagName
      });
    }).observe({ entryTypes: ['largest-contentful-paint'] });
  }

  observeFID() {
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      entries.forEach(entry => {
        this.sendMetrics('fid', {
          value: entry.processingStart - entry.startTime,
          inputType: entry.name
        });
      });
    }).observe({ entryTypes: ['first-input'] });
  }

  observeCLS() {
    let clsValue = 0;

    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      entries.forEach(entry => {
        if (!entry.hadRecentInput) {
          clsValue += entry.value;
        }
      });

      this.sendMetrics('cls', { value: clsValue });
    }).observe({ entryTypes: ['layout-shift'] });
  }

  sendMetrics(type, data) {
    // 发送到CDN分析服务
    fetch('/cdn-analytics/metrics', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        type,
        data,
        timestamp: Date.now(),
        userAgent: navigator.userAgent,
        url: window.location.href
      })
    }).catch(error => {
      console.warn('Failed to send metrics:', error);
    });
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

// 缓存分析器
class CacheAnalyzer {
  constructor() {
    this.cacheStats = {
      requests: 0,
      hits: 0,
      misses: 0,
      bypasses: 0,
      errors: 0
    };

    this.startAnalysis();
  }

  startAnalysis() {
    // 分析资源缓存状态
    this.analyzeResourceCache();

    // 分析缓存命中率
    this.analyzeCacheHitRate();

    // 分析缓存失效模式
    this.analyzeCacheInvalidation();
  }

  analyzeResourceCache() {
    const resources = performance.getEntriesByType('resource');

    resources.forEach(resource => {
      this.cacheStats.requests++;

      // 检查是否来自缓存
      if (resource.transferSize === 0 && resource.decodedBodySize > 0) {
        this.cacheStats.hits++;
      } else if (resource.transferSize === resource.decodedBodySize) {
        this.cacheStats.misses++;
      } else {
        this.cacheStats.bypasses++;
      }
    });

    this.generateCacheReport();
  }

  generateCacheReport() {
    const hitRate = (this.cacheStats.hits / this.cacheStats.requests * 100).toFixed(2);
    const missRate = (this.cacheStats.misses / this.cacheStats.requests * 100).toFixed(2);

    const report = {
      totalRequests: this.cacheStats.requests,
      cacheHits: this.cacheStats.hits,
      cacheMisses: this.cacheStats.misses,
      cacheBypasses: this.cacheStats.bypasses,
      hitRate: `${hitRate}%`,
      missRate: `${missRate}%`,
      recommendations: this.generateRecommendations()
    };

    console.log('CDN Cache Analysis Report:', report);
    return report;
  }

  generateRecommendations() {
    const recommendations = [];
    const hitRate = this.cacheStats.hits / this.cacheStats.requests;

    if (hitRate < 0.7) {
      recommendations.push({
        type: 'cache-optimization',
        priority: 'high',
        message: '缓存命中率较低，建议优化缓存策略'
      });
    }

    if (this.cacheStats.bypasses > this.cacheStats.requests * 0.1) {
      recommendations.push({
        type: 'cache-bypass',
        priority: 'medium',
        message: '存在较多缓存绕过，检查Cache-Control头设置'
      });
    }

    return recommendations;
  }
}