HTTP/2性能优化

HTTP/2概述

什么是HTTP/2

HTTP/2是HTTP协议的第二代版本，由Google的SPDY协议发展而来，旨在解决HTTP/1.1的性能瓶颈问题，提供更快的网页加载速度和更好的用户体验。

HTTP/2解决的问题

1. 队头阻塞：HTTP/1.1中，一个请求的延迟会影响后续请求
2. 连接数限制：浏览器对同一域名的并发连接数有限制
3. 重复头部：每个请求都携带相同的头部信息
4. 单向通信：只能由客户端发起请求

HTTP/2 vs HTTP/1.1对比

特性	HTTP/1.1	HTTP/2
连接方式	多个TCP连接	单个TCP连接
请求处理	串行处理	并行处理
头部传输	明文，重复	压缩，不重复
服务器推送	不支持	支持
流量控制	连接级别	流级别

HTTP/2核心特性

二进制协议

HTTP/2使用二进制格式而不是文本格式，提高了解析效率和传输性能。

多路复用

什么是多路复用

多路复用（Multiplexing）是HTTP/2的核心特性，允许在单个TCP连接上同时处理多个HTTP请求和响应，每个请求/响应对称为一个"流"（Stream），多个流可以并行传输，大大提升了网络传输效率。

为什么需要多路复用

1. 解决队头阻塞：HTTP/1.1中，一个请求的延迟会影响后续请求，多路复用解决了这个问题
2. 提升传输效率：多个请求可以并行处理，减少等待时间
3. 减少连接开销：避免建立多个TCP连接的开销
4. 改善用户体验：页面加载速度更快，用户等待时间更短
5. 优化资源利用：更有效地利用网络带宽和服务器资源
6. 支持现代Web应用：满足现代Web应用对并发请求的需求

什么情况需要多路复用

• 资源密集型页面：包含大量CSS、JavaScript、图片等资源的页面
• 高并发应用：需要同时处理多个用户请求的应用
• 实时应用：需要频繁更新数据的实时应用
• 移动端应用：网络环境复杂，需要优化传输效率的移动应用
• CDN服务：需要高效传输大量静态资源的CDN服务
• API网关：需要处理大量并发API请求的网关服务

没有多路复用会遇到什么问题

1. 队头阻塞：一个慢请求会阻塞后续所有请求
2. 连接数限制：浏览器对同一域名的并发连接数有限制（通常6-8个）
3. 资源等待：关键资源需要等待其他资源传输完成
4. 页面加载慢：整体页面加载时间较长
5. 用户体验差：用户需要等待较长时间才能看到完整页面
6. 服务器压力大：需要维护大量TCP连接

多路复用的工作原理

HTTP/1.1: 串行处理
请求1 → 响应1 → 请求2 → 响应2 → 请求3 → 响应3

HTTP/2: 并行处理
请求1 ──┐
请求2 ──┼─→ 并行传输 → 响应1 ──┐
请求3 ──┘                        ├─→ 并行接收
                                 响应2 ──┼─→ 用户
                                 响应3 ──┘

流（Stream）的概念

1. 流标识符：每个流都有唯一的标识符，用于区分不同的请求/响应对
2. 流优先级：可以为流设置优先级，重要资源优先传输
3. 流依赖关系：可以设置流之间的依赖关系，确保传输顺序
4. 流状态管理：每个流都有独立的状态，互不影响

多路复用的优势

1. 并发传输：多个请求可以同时传输，互不阻塞
2. 动态优先级：可以根据需要动态调整流的优先级
3. 服务器推送：服务器可以主动推送相关资源
4. 头部压缩：减少重复的头部信息传输
5. 流量控制：提供流级别的流量控制

多路复用的挑战

1. 实现复杂度：比HTTP/1.1实现更复杂
2. 调试困难：多个流并行传输，调试相对困难
3. 兼容性：需要服务器和客户端都支持HTTP/2
4. 配置要求：需要正确配置服务器以支持HTTP/2

最佳实践

1. 启用HTTP/2：确保服务器支持并启用HTTP/2
2. 合理设置优先级：为重要资源设置高优先级
3. 监控性能：监控HTTP/2的性能表现
4. 降级支持：提供HTTP/1.1的降级支持
5. 测试验证：在不同环境下测试HTTP/2的性能

服务器推送

什么是服务器推送

服务器推送（Server Push）是HTTP/2的一项重要特性，允许服务器在客户端明确请求之前主动向客户端发送资源，通过预测客户端可能需要的内容，提前推送相关资源，减少网络往返次数，显著提升页面加载性能。

为什么需要服务器推送

1. 减少网络往返：避免客户端逐个请求资源的延迟
2. 提升加载速度：关键资源可以提前到达客户端
3. 优化用户体验：页面渲染更快，用户等待时间更短
4. 智能资源预测：服务器可以根据页面内容智能推送相关资源
5. 减少请求数量：减少客户端的HTTP请求数量
6. 优化关键路径：确保关键资源优先加载，优化页面渲染路径

什么情况需要服务器推送

• 关键资源：页面渲染必需的关键CSS、JavaScript文件
• 首屏优化：首屏显示需要的重要图片、字体等资源
• 依赖资源：页面中明确依赖的其他资源
• 高优先级内容：对用户体验影响较大的资源
• 移动端优化：网络延迟较高的移动端环境
• CDN服务：需要优化资源传输的CDN服务

没有服务器推送会遇到什么问题

1. 资源等待：客户端需要等待发现资源后再请求
2. 网络延迟：每个资源都需要额外的网络往返
3. 页面加载慢：整体页面加载时间较长
4. 用户体验差：用户需要等待资源加载完成
5. 资源发现延迟：客户端需要解析HTML后才能发现需要的资源
6. 关键路径阻塞：关键资源加载延迟影响页面渲染

服务器推送的工作原理

传统方式：
客户端请求HTML → 服务器返回HTML → 客户端解析HTML → 发现需要CSS → 请求CSS → 服务器返回CSS

服务器推送：
客户端请求HTML → 服务器返回HTML + 推送CSS → 客户端同时接收HTML和CSS

推送策略类型

1. 关键资源推送：推送页面渲染必需的关键资源
2. 依赖资源推送：推送页面中明确依赖的资源
3. 智能预测推送：根据页面内容智能预测需要的资源
4. 条件推送：根据客户端条件决定是否推送
5. 优先级推送：根据资源重要性设置推送优先级

推送资源选择

1. CSS文件：页面样式文件，对渲染影响较大
2. JavaScript文件：页面交互脚本，影响功能可用性
3. 字体文件：页面字体，影响文字显示
4. 关键图片：首屏显示的重要图片
5. 图标资源：页面中使用的图标和装饰元素

推送配置示例

# Nginx配置示例
location / {
    root /var/www/html;
    index index.html;
    
    # 推送关键资源
    http2_push /css/critical.css;
    http2_push /js/app.js;
    http2_push /fonts/main.woff2;
    http2_push /images/hero.jpg;
}

# 根据条件推送
location /api/users {
    # 推送用户相关的资源
    http2_push /css/user-profile.css;
    http2_push /js/user-profile.js;
}

推送优化策略

1. 避免过度推送：只推送真正需要的资源，避免浪费带宽
2. 设置合理优先级：为推送的资源设置合适的优先级
3. 监控推送效果：监控推送对性能的实际影响
4. 动态调整策略：根据实际使用情况动态调整推送策略
5. 降级支持：为不支持推送的客户端提供降级方案

推送的注意事项

1. 缓存策略：推送的资源需要合理的缓存策略
2. 带宽控制：避免推送过多资源占用过多带宽
3. 客户端支持：确保客户端支持HTTP/2推送
4. 推送时机：选择合适的时机进行推送
5. 错误处理：处理推送失败的情况

最佳实践

1. 推送关键资源：优先推送对页面渲染影响最大的资源
2. 合理设置数量：避免一次推送过多资源
3. 监控性能指标：监控推送对页面加载性能的影响
4. 测试验证：在不同环境下测试推送的效果
5. 持续优化：根据实际效果持续优化推送策略

头部压缩

什么是头部压缩

头部压缩（Header Compression）是HTTP/2的一项重要优化技术，使用HPACK算法对HTTP请求和响应的头部信息进行压缩，通过消除重复的头部字段和优化编码方式，显著减少头部数据的传输量，提升网络传输效率。

为什么需要头部压缩

1. 减少传输开销：HTTP头部通常包含大量重复信息，压缩可以显著减少传输量
2. 提升传输效率：头部数据减少意味着更快的传输速度
3. 优化移动网络：在带宽有限的移动网络环境下，头部压缩效果更明显
4. 减少延迟：头部数据减少可以降低网络延迟
5. 提升并发性能：多个请求的头部压缩效果累积，提升整体性能
6. 节省带宽成本：减少数据传输量，降低网络使用成本

什么情况需要头部压缩

• 高并发应用：需要处理大量HTTP请求的应用
• 移动端应用：在移动网络环境下运行的应用
• API服务：提供大量API接口的服务
• 静态资源服务：提供大量静态资源的CDN服务
• 微服务架构：服务间频繁通信的微服务系统
• 实时应用：需要低延迟的实时通信应用

没有头部压缩会遇到什么问题

1. 传输开销大：每个请求都包含完整的头部信息
2. 网络延迟高：头部数据增加导致传输时间延长
3. 带宽浪费：重复的头部信息占用不必要的带宽
4. 性能下降：整体网络性能受到影响
5. 成本增加：更多的数据传输意味着更高的成本
6. 用户体验差：页面加载速度慢，影响用户体验

HPACK算法原理

HPACK（HTTP/2 Header Compression）是HTTP/2专用的头部压缩算法，通过以下机制实现压缩：

1. 静态表（Static Table）

   • 预定义61个常用的HTTP头部字段
   • 包括常见的请求头、响应头和伪头部字段
   • 客户端和服务器都已知，无需传输

2. 动态表（Dynamic Table）

   • 在连接过程中动态构建的头部字段表
   • 可以添加新的头部字段或更新现有字段
   • 表大小可以动态调整

3. 索引编码（Indexed Representation）

   • 使用索引引用已传输的头部字段
   • 避免重复传输相同的头部信息
   • 支持静态表和动态表的索引

4. 霍夫曼编码（Huffman Coding）

   • 对字符串值进行压缩编码
   • 根据字符频率分配不同长度的编码
   • 进一步减少字符串的传输量

头部压缩的优势

1. 高压缩率：通常可以达到80-90%的压缩率
2. 增量压缩：动态表可以累积压缩效果
3. 双向压缩：请求和响应头部都可以压缩
4. 状态同步：客户端和服务器保持压缩状态同步
5. 向后兼容：不影响HTTP语义，只是传输优化

压缩效果示例

HTTP/1.1 头部示例（未压缩）：
GET /api/users HTTP/1.1
Host: api.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: application/json
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Cache-Control: no-cache

HTTP/2 头部压缩后：
:method: GET
:path: /api/users
:authority: api.example.com
:scheme: https
accept: application/json
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)

压缩配置优化

1. 动态表大小：根据内存和性能需求调整动态表大小
2. 压缩级别：选择合适的压缩级别，平衡压缩率和性能
3. 缓存策略：合理设置头部缓存策略
4. 监控指标：监控压缩效果和性能影响

最佳实践

1. 启用头部压缩：确保服务器支持并启用HPACK压缩
2. 优化头部字段：减少不必要的头部字段
3. 合理设置大小：根据实际需求设置动态表大小
4. 监控压缩效果：监控头部压缩的实际效果
5. 测试验证：在不同环境下测试压缩性能

注意事项

1. 内存使用：动态表会占用内存，需要合理控制大小
2. 兼容性：确保客户端支持HPACK压缩
3. 性能影响：压缩和解压缩有一定的CPU开销
4. 调试困难：压缩后的头部调试相对困难
5. 安全考虑：某些压缩方式可能泄露信息

流量控制

什么是流量控制

流量控制（Flow Control）是HTTP/2的一项重要机制，允许接收方控制发送方发送数据的速率，防止发送方发送过快导致接收方缓冲区溢出，确保数据传输的稳定性和可靠性。

为什么需要流量控制

1. 防止缓冲区溢出：避免接收方无法处理过快的数据流
2. 资源公平分配：确保多个流之间公平地使用网络资源
3. 网络拥塞控制：在网络拥塞时控制数据发送速率
4. 内存保护：防止接收方内存被大量数据占用
5. 流优先级管理：支持不同流的优先级控制
6. 网络稳定性：维护网络的稳定性和可预测性

什么情况需要流量控制

• 高并发应用：需要处理大量并发连接的应用
• 资源受限环境：内存、带宽等资源有限的系统
• 多用户系统：需要为多个用户公平分配资源的系统
• 实时应用：对延迟敏感，需要控制数据流的应用
• 移动端应用：网络环境复杂，需要智能流量控制的应用
• CDN服务：需要为不同用户分配带宽的CDN服务

没有流量控制会遇到什么问题

1. 缓冲区溢出：接收方无法处理过快的数据，导致数据丢失
2. 内存耗尽：大量数据占用内存，可能导致系统崩溃
3. 网络拥塞：数据发送过快导致网络拥塞
4. 资源分配不均：某些流可能占用过多资源，影响其他流
5. 系统不稳定：系统负载过高，影响整体性能
6. 用户体验差：网络拥塞导致响应延迟，影响用户体验

HTTP/2流量控制机制

HTTP/2的流量控制基于"信用"（Credit）机制，每个流都有独立的流量控制窗口：

1. 初始窗口大小

   • 每个流都有初始的流量控制窗口
   • 默认大小为65,535字节
   • 可以通过SETTINGS_INITIAL_WINDOW_SIZE调整

2. 窗口更新机制

   • 接收方处理数据后，发送WINDOW_UPDATE帧
   • 增加流量控制窗口大小
   • 允许发送方继续发送数据

3. 流级别控制

   • 每个流都有独立的流量控制窗口
   • 不同流之间互不影响
   • 支持流的优先级设置

4. 连接级别控制

   • 整个连接也有流量控制
   • 防止连接级别的资源耗尽
   • 影响所有流的总体流量

流量控制算法

1. 滑动窗口算法

   • 维护一个可发送数据的窗口
   • 根据接收方的处理能力动态调整
   • 支持流级别的独立控制

2. 信用机制

   • 发送方需要"信用"才能发送数据
   • 接收方通过WINDOW_UPDATE提供信用
   • 确保发送方不会发送过多数据

3. 优先级调度

   • 高优先级的流可以获得更多资源
   • 低优先级的流在资源充足时也能正常传输
   • 支持依赖关系和权重设置

流量控制配置

# Nginx HTTP/2流量控制配置
http2_max_concurrent_streams 128;           # 最大并发流数
http2_recv_buffer_size 256k;                # 接收缓冲区大小
http2_idle_timeout 180s;                    # 空闲超时时间
http2_max_field_size 4k;                    # 最大头部字段大小
http2_max_header_size 16k;                  # 最大头部大小
http2_push_preload on;                      # 启用推送预加载
http2_max_concurrent_pushes 10;             # 最大并发推送数

流量控制优化策略

1. 窗口大小调优

   • 根据网络环境调整初始窗口大小
   • 监控窗口更新频率，优化窗口大小
   • 平衡延迟和吞吐量

2. 优先级设置

   • 为关键资源设置高优先级
   • 合理设置流的依赖关系
   • 避免优先级冲突

3. 监控和调优

   • 监控流量控制的效果
   • 根据实际性能调整参数
   • 持续优化流量控制策略

流量控制的优势

1. 资源保护：防止单个流占用过多资源
2. 公平分配：确保多个流之间公平使用资源
3. 网络稳定：维护网络的稳定性和可预测性
4. 优先级支持：支持不同流的优先级控制
5. 自适应调整：根据网络条件动态调整流量

最佳实践

1. 合理设置窗口大小：根据网络环境设置合适的窗口大小
2. 监控流量控制效果：持续监控流量控制的性能表现
3. 优化优先级设置：合理设置流的优先级和依赖关系
4. 测试验证：在不同网络环境下测试流量控制效果
5. 持续优化：根据实际效果持续优化流量控制策略

注意事项

1. 性能影响：流量控制可能影响数据传输性能
2. 配置复杂：需要合理配置多个相关参数
3. 调试困难：流量控制问题调试相对困难
4. 兼容性：需要客户端和服务器都支持流量控制
5. 监控要求：需要完善的监控系统来观察流量控制效果

多路复用详解

多路复用原理

HTTP/2引入了"流"（Stream）的概念，每个请求/响应对应一个流，多个流可以在同一个TCP连接上并行传输。

多路复用的优势

1. 减少延迟：避免队头阻塞
2. 提高吞吐量：充分利用TCP连接
3. 减少资源消耗：减少TCP连接数
4. 改善用户体验：页面加载更快

服务器推送

服务器推送原理

服务器推送允许服务器在客户端请求之前主动发送资源，减少往返次数，提升页面加载性能。

推送场景

1. 关键CSS：推送页面渲染所需的关键样式
2. 关键JavaScript：推送页面交互所需的核心脚本
3. 字体文件：推送页面使用的字体资源
4. 图片资源：推送首屏显示的重要图片

服务器推送实现

Nginx配置

server {
    listen 443 ssl http2;
    server_name example.com;
    
    # 启用HTTP/2
    http2_push_preload on;
    
    location / {
        root /var/www/html;
        index index.html;
        
        # 推送关键资源
        http2_push /css/critical.css;
        http2_push /js/app.js;
        http2_push /fonts/main.woff2;
    }
}

头部压缩

HPACK算法原理

HPACK是HTTP/2专用的头部压缩算法，通过以下方式减少头部大小：

1. 静态表：预定义常用头部字段
2. 动态表：动态添加头部字段
3. 索引编码：使用索引引用已传输的头部
4. 霍夫曼编码：对字符串进行压缩

HTTP/2配置

服务器配置

Nginx HTTP/2配置

server {
    listen 443 ssl http2;
    server_name example.com;
    
    # SSL配置
    ssl_certificate /path/to/certificate.crt;
    ssl_certificate_key /path/to/private.key;
    
    # HTTP/2配置
    http2_push_preload on;
    http2_max_concurrent_streams 128;
    http2_recv_timeout 30s;
    http2_idle_timeout 180s;
    
    # 推送配置
    location / {
        root /var/www/html;
        index index.html;
        
        # 推送关键资源
        http2_push /css/critical.css;
        http2_push /js/app.js;
    }
}

性能优化策略

资源优化

1. 关键资源内联：将关键CSS和JavaScript内联到HTML中
2. 资源合并：减少HTTP请求数量
3. 资源压缩：使用gzip或brotli压缩
4. 图片优化：使用WebP格式，设置合适的尺寸

加载策略优化

// HTTP/2资源加载优化
class HTTP2ResourceLoader {
  constructor() {
    this.resourceQueue = [];
    this.loadingResources = new Set();
    this.maxConcurrent = 100; // HTTP/2支持更多并发
  }
  
  // 添加资源到队列
  addResource(url, priority = 0) {
    this.resourceQueue.push({ url, priority });
    this.resourceQueue.sort((a, b) => b.priority - a.priority);
    this.processQueue();
  }
  
  // 处理资源队列
  processQueue() {
    while (this.resourceQueue.length > 0 && 
           this.loadingResources.size < this.maxConcurrent) {
      const resource = this.resourceQueue.shift();
      this.loadResource(resource);
    }
  }
  
  // 加载单个资源
  async loadResource(resource) {
    this.loadingResources.add(resource.url);
    
    try {
      const response = await fetch(resource.url);
      if (response.ok) {
        console.log(`资源加载成功: ${resource.url}`);
      }
    } catch (error) {
      console.error(`资源加载失败: ${resource.url}`, error);
    } finally {
      this.loadingResources.delete(resource.url);
      this.processQueue(); // 继续处理队列
    }
  }
  
  // 预加载资源
  preloadResources(urls) {
    urls.forEach(url => {
      const link = document.createElement('link');
      link.rel = 'preload';
      link.href = url;
      
      // 根据文件类型设置as属性
      if (url.endsWith('.css')) {
        link.as = 'style';
      } else if (url.endsWith('.js')) {
        link.as = 'script';
      } else if (url.endsWith('.woff2')) {
        link.as = 'font';
        link.crossOrigin = 'anonymous';
      }
      
      document.head.appendChild(link);
    });
  }
}

// 使用示例
const loader = new HTTP2ResourceLoader();

// 预加载关键资源
loader.preloadResources([
  '/css/critical.css',
  '/js/app.js',
  '/fonts/main.woff2'
]);

// 添加非关键资源
loader.addResource('/css/non-critical.css', 1);
loader.addResource('/js/analytics.js', 2);
loader.addResource('/images/hero.jpg', 3);

兼容性考虑

降级策略

// HTTP/2降级策略
class HTTP2Fallback {
  constructor() {
    this.isHTTP2 = false;
    this.fallbackStrategies = new Map();
    this.initFallbackStrategies();
  }
  
  // 初始化降级策略
  initFallbackStrategies() {
    // HTTP/1.1优化策略
    this.fallbackStrategies.set('http11', {
      domainSharding: true,
      resourceConcatenation: true,
      criticalInlining: true,
      preloadCritical: true
    });
    
    // HTTP/2优化策略
    this.fallbackStrategies.set('http2', {
      domainSharding: false,
      resourceConcatenation: false,
      criticalInlining: false,
      preloadCritical: true
    });
  }
  
  // 检测协议版本
  async detectProtocol() {
    try {
      const response = await fetch('/protocol-test', { method: 'HEAD' });
      const protocol = response.headers.get('x-protocol') || 'http/1.1';
      
      this.isHTTP2 = protocol === 'h2';
      return this.isHTTP2;
    } catch (error) {
      console.warn('协议检测失败，使用HTTP/1.1策略');
      this.isHTTP2 = false;
      return false;
    }
  }
  
  // 应用优化策略
  applyOptimizationStrategy() {
    const strategy = this.isHTTP2 ? 'http2' : 'http11';
    const config = this.fallbackStrategies.get(strategy);
    
    if (config.domainSharding) {
      this.enableDomainSharding();
    }
    
    if (config.resourceConcatenation) {
      this.enableResourceConcatenation();
    }
    
    if (config.criticalInlining) {
      this.enableCriticalInlining();
    }
    
    if (config.preloadCritical) {
      this.enablePreloadCritical();
    }
  }
  
  // 启用域名分片
  enableDomainSharding() {
    const domains = [
      'cdn1.example.com',
      'cdn2.example.com',
      'cdn3.example.com'
    ];
    
    // 将资源分配到不同域名
    const resources = document.querySelectorAll('img, script, link[rel="stylesheet"]');
    resources.forEach((resource, index) => {
      const domain = domains[index % domains.length];
      const url = new URL(resource.src || resource.href);
      url.hostname = domain;
      resource.src = resource.href = url.toString();
    });
  }
  
  // 启用资源合并
  enableResourceConcatenation() {
    // 合并CSS文件
    const cssLinks = document.querySelectorAll('link[rel="stylesheet"]');
    if (cssLinks.length > 1) {
      const combinedCSS = Array.from(cssLinks)
        .map(link => link.href)
        .join(',');
      
      // 创建合并后的CSS链接
      const combinedLink = document.createElement('link');
      combinedLink.rel = 'stylesheet';
      combinedLink.href = `/combined.css?files=${encodeURIComponent(combinedCSS)}`;
      
      // 替换原有链接
      cssLinks.forEach(link => link.remove());
      document.head.appendChild(combinedLink);
    }
  }
  
  // 启用关键资源内联
  enableCriticalInlining() {
    // 内联关键CSS
    const criticalCSS = `
      body { margin: 0; padding: 0; }
      .header { background: #fff; }
      .main { padding: 20px; }
    `;
    
    const style = document.createElement('style');
    style.textContent = criticalCSS;
    document.head.appendChild(style);
  }
  
  // 启用关键资源预加载
  enablePreloadCritical() {
    const criticalResources = [
      '/css/critical.css',
      '/js/app.js',
      '/fonts/main.woff2'
    ];
    
    criticalResources.forEach(url => {
      const link = document.createElement('link');
      link.rel = 'preload';
      link.href = url;
      
      if (url.endsWith('.css')) {
        link.as = 'style';
      } else if (url.endsWith('.js')) {
        link.as = 'script';
      } else if (url.endsWith('.woff2')) {
        link.as = 'font';
        link.crossOrigin = 'anonymous';
      }
      
      document.head.appendChild(link);
    });
  }
}

// 使用示例
const fallback = new HTTP2Fallback();

// 初始化时检测协议并应用策略
fallback.detectProtocol().then(() => {
  fallback.applyOptimizationStrategy();
});

实际应用示例

完整的HTTP/2客户端实现

class HTTP2Client {
  constructor(baseURL, options = {}) {
    this.baseURL = baseURL;
    this.options = {
      timeout: 10000,
      maxConcurrentStreams: 100,
      enablePush: true,
      ...options
    };
    
    this.streams = new Map();
    this.pushPromises = new Map();
    this.connection = null;
  }
  
  // 建立连接
  async connect() {
    try {
      // 检测HTTP/2支持
      const isHTTP2 = await this.detectHTTP2();
      
      if (isHTTP2) {
        console.log('使用HTTP/2连接');
        return await this.createHTTP2Connection();
      } else {
        console.log('降级到HTTP/1.1');
        return await this.createHTTP11Connection();
      }
    } catch (error) {
      console.error('连接失败:', error);
      throw error;
    }
  }
  
  // 检测HTTP/2支持
  async detectHTTP2() {
    try {
      const response = await fetch(this.baseURL, { method: 'HEAD' });
      const protocol = response.headers.get('x-protocol') || 'http/1.1';
      return protocol === 'h2';
    } catch (error) {
      return false;
    }
  }
  
  // 创建HTTP/2连接
  async createHTTP2Connection() {
    // 这里应该使用真实的HTTP/2客户端库
    // 如 node-http2 或浏览器原生支持
    console.log('HTTP/2连接已建立');
    return true;
  }
  
  // 创建HTTP/1.1连接
  async createHTTP11Connection() {
    console.log('HTTP/1.1连接已建立');
    return true;
  }
  
  // 发送请求
  async request(endpoint, options = {}) {
    const url = `${this.baseURL}${endpoint}`;
    const config = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      ...options
    };
    
    try {
      const response = await fetch(url, config);
      
      // 处理推送承诺
      if (this.options.enablePush) {
        this.handlePushPromises(response);
      }
      
      return response;
    } catch (error) {
      console.error('请求失败:', error);
      throw error;
    }
  }
  
  // 处理推送承诺
  handlePushPromises(response) {
    const pushPromises = response.headers.get('link');
    if (pushPromises) {
      // 解析推送承诺
      const promises = pushPromises.split(',')
        .map(link => {
          const match = link.match(/<([^>]+)>;\s*rel=preload/);
          return match ? match[1] : null;
        })
        .filter(Boolean);
      
      promises.forEach(url => {
        console.log('收到推送承诺:', url);
        this.pushPromises.set(url, true);
      });
    }
  }
  
  // 检查资源是否已被推送
  isResourcePushed(url) {
    return this.pushPromises.has(url);
  }
  
  // 获取请求
  async get(endpoint, options = {}) {
    const response = await this.request(endpoint, { ...options, method: 'GET' });
    return response.json();
  }
  
  // 发送POST请求
  async post(endpoint, data, options = {}) {
    const response = await this.request(endpoint, {
      ...options,
      method: 'POST',
      body: JSON.stringify(data)
    });
    return response.json();
  }
  
  // 批量请求
  async batch(requests) {
    const promises = requests.map(req => this.request(req.endpoint, req.options));
    return Promise.all(promises);
  }
  
  // 关闭连接
  close() {
    if (this.connection) {
      this.connection.close();
      this.connection = null;
    }
    
    this.streams.clear();
    this.pushPromises.clear();
  }
}

// 使用示例
const client = new HTTP2Client('https://api.example.com');

// 建立连接
client.connect().then(() => {
  // 发送单个请求
  client.get('/users')
    .then(users => console.log('用户列表:', users))
    .catch(error => console.error('获取用户失败:', error));
  
  // 批量请求
  const requests = [
    { endpoint: '/users/1', options: { method: 'GET' } },
    { endpoint: '/users/2', options: { method: 'GET' } },
    { endpoint: '/users/3', options: { method: 'GET' } }
  ];
  
  client.batch(requests)
    .then(responses => console.log('批量响应:', responses))
    .catch(error => console.error('批量请求失败:', error));
});

最佳实践

服务器端最佳实践

1. 启用HTTP/2：确保服务器支持HTTP/2
2. 配置推送：合理使用服务器推送
3. 优化头部：减少不必要的头部字段
4. 设置超时：配置合适的连接超时时间

客户端最佳实践

1. 检测支持：检测HTTP/2支持并应用相应策略
2. 优化资源：合理组织资源加载顺序
3. 处理推送：正确处理服务器推送的资源
4. 降级策略：提供HTTP/1.1降级方案

性能监控

// HTTP/2性能监控
class HTTP2PerformanceMonitor {
  constructor() {
    this.metrics = {
      requests: 0,
      responses: 0,
      pushPromises: 0,
      errors: 0,
      totalTime: 0,
      averageTime: 0
    };
    
    this.initObserver();
  }
  
  // 初始化性能观察器
  initObserver() {
    if ('PerformanceObserver' in window) {
      const observer = new PerformanceObserver((list) => {
        list.getEntries().forEach((entry) => {
          this.recordMetric(entry);
        });
      });
      
      observer.observe({ entryTypes: ['resource', 'navigation'] });
    }
  }
  
  // 记录性能指标
  recordMetric(entry) {
    if (entry.entryType === 'resource') {
      this.metrics.requests++;
      this.metrics.totalTime += entry.duration;
      this.metrics.averageTime = this.metrics.totalTime / this.metrics.requests;
      
      if (entry.nextHopProtocol === 'h2') {
        console.log('HTTP/2资源:', entry.name, '加载时间:', entry.duration);
      }
    }
  }
  
  // 获取性能报告
  getReport() {
    return {
      ...this.metrics,
      http2Support: this.detectHTTP2Support(),
      recommendations: this.generateRecommendations()
    };
  }
  
  // 检测HTTP/2支持
  detectHTTP2Support() {
    const resources = performance.getEntriesByType('resource');
    return resources.some(resource => resource.nextHopProtocol === 'h2');
  }
  
  // 生成优化建议
  generateRecommendations() {
    const recommendations = [];
    
    if (this.metrics.averageTime > 1000) {
      recommendations.push('考虑启用HTTP/2服务器推送');
    }
    
    if (this.metrics.requests > 50) {
      recommendations.push('考虑合并资源减少请求数量');
    }
    
    return recommendations;
  }
}

// 使用示例
const monitor = new HTTP2PerformanceMonitor();

// 页面加载完成后获取报告
window.addEventListener('load', () => {
  setTimeout(() => {
    const report = monitor.getReport();
    console.log('性能报告:', report);
  }, 1000);
});

总结

HTTP/2通过多路复用、服务器推送、头部压缩等特性，显著提升了Web应用的性能。掌握HTTP/2的配置和优化策略，对于构建高性能的前端应用至关重要。

通过合理使用HTTP/2的特性，我们可以减少网络延迟，提高资源加载效率，同时保持良好的向后兼容性。在接下来的学习中，我们将深入探讨WebSocket实时通信、长连接管理等进阶主题。