浏览器CDN资源并行加载与域名策略指南

1. 浏览器并行加载机制

1.1 基础并行策略

sequenceDiagram
    participant Browser as 浏览器
    participant DNS as DNS服务器
    participant CDN1 as 域名 1
    participant CDN2 as 域名 2
    
    Browser->>DNS: 解析域名 1
    Browser->>DNS: 并行解析域名 2
    DNS-->>Browser: 返回CDN1 IP
    DNS-->>Browser: 返回CDN2 IP
    
    par 并行请求
        Browser->>CDN1: 请求资源1
        Browser->>CDN2: 请求资源2
    Note over Browser,CDN2: 基于优先级和连接数限制
动态调度请求
    end
    
    CDN1-->>Browser: 返回资源1
    CDN2-->>Browser: 返回资源2

NOTE

浏览器并行加载资源主要受以下因素影响：

1. 并发连接数限制：
   • 同一域名下的并发连接数限制（通常为6-8个）
   • 总并发连接数限制（因浏览器而异）

IMPORTANT

浏览器对不同类型资源有不同的加载优先级策略

2. 资源优先级：
   • CSS（最高优先级）
   • JavaScript（高优先级）
   • 图片（中等优先级）
   • 字体（低优先级）

// 资源优先级管理器
class ResourcePriorityManager {
  constructor() {
    this.priorities = {
      HIGHEST: ['css'], // 样式表
      HIGH: ['js'], // 脚本
      MEDIUM: ['image'], // 图片
      LOW: ['font'], // 字体
      LOWEST: ['prefetch'] // 预加载资源
    };
  }

  calculatePriority(resource) {
    const extension = resource.split('.').pop();
    
    for (const [priority, types] of Object.entries(this.priorities)) {
      if (types.includes(extension)) {
        return priority;
      }
    }
    
    return 'MEDIUM';
  }
}

1.3 影响因素

1. DNS解析：

   • 每个新域名都需要DNS解析
   • DNS预解析可以优化这个过程
   • <link rel="dns-prefetch">

2. TCP连接：

   • 需要TCP三次握手
   • 可以使用Keep-Alive保持连接
   • 预连接可以提前建立连接

2. HTTP/1.1 域名分片策略

2.1 传统分片实现

NOTE

域名分片是HTTP/1.1时代的优化策略，用于突破浏览器对同一域名的并发请求限制。

优势：

• 突破同域名并发限制
• 提高资源加载速度
• 适合HTTP/1.1环境

劣势：

• 增加DNS解析开销
• 增加服务器连接数
• 维护成本高

// 域名分片管理器
class DomainShardingManager {
  constructor(domains) {
    this.domains = domains;
    this.currentIndex = 0;
    this.resourceMap = new Map();
  }

  // 轮询分配域名
  getNextDomain() {
    const domain = this.domains[this.currentIndex];
    this.currentIndex = (this.currentIndex + 1) % this.domains.length;
    return domain;
  }

  // 资源分片
  shardResource(resource) {
    const domain = this.getNextDomain();
    const url = `https://${domain}/${resource}`;
    this.resourceMap.set(resource, url);
    return url;
  }
}

// 使用示例
const shardingManager = new DomainShardingManager([
  'cdn1.example.com',
  'cdn2.example.com',
  'cdn3.example.com'
]);

2.1 HTTP/2特性利用

WARNING

HTTP/2的多路复用特性使得域名分片不再必要，甚至可能产生负面影响。

HTTP/2优势：

1. 多路复用：

   • 单个TCP连接可以处理多个请求
   • 避免了TCP连接数限制
   • 减少了握手开销

2. 二进制分帧：

   • 更高效的数据传输
   • 更好的错误处理
   • 更低的延迟

graph TD
    A[HTTP/2优势] --> B[多路复用]
    A --> C[头部压缩]
    A --> D[服务器推送]
    A --> E[二进制分帧]
    
    B --> F[单连接并行传输]
    C --> G[减少带宽占用]
    D --> H[主动推送资源]
    E --> I[更高效传输]

3. 最佳实践建议

3.1 HTTP/2环境

1. 避免域名分片：

   • 使用单个强大的域名
   • 充分利用多路复用
   • 减少DNS查询开销

2. 资源提示：

   • 使用preload加载关键资源
   • 使用preconnect提前建立连接
   • 适度使用dns-prefetch

3.2 混合环境

TIP

在同时支持HTTP/1.1和HTTP/2的环境中，建议：

1. 协议检测：

   • 根据协议版本动态调整策略
   • HTTP/2环境下合并域名
   • HTTP/1.1环境下适度分片

2. 渐进式优化：

   • 优先考虑HTTP/2优化
   • 保持对HTTP/1.1的基本支持
   • 监控性能指标动态调整

4. 性能监控

4.1 关键指标

1. 资源加载时间：

   • DNS解析时间
   • TCP连接时间
   • 首字节时间（TTFB）
   • 资源下载时间

2. 并发请求数：

   • 活跃连接数
   • 排队请求数
   • 完成请求数