第05章 CDN 性能优化

本章聚焦 CDN 层面的性能优化技术，涵盖图片优化、压缩算法、协议升级和连接优化，帮助你榨干每一毫秒的性能。

5.1 图片优化

5.1.1 图片格式对比

格式	压缩方式	透明度	动画	浏览器支持	适用场景
JPEG	有损	❌	❌	全部	照片、复杂图像
PNG	无损	✅	❌	全部	Logo、图标、截图
GIF	无损	✅	✅	全部	简单动画
WebP	有损+无损	✅	✅	96%+	现代浏览器首选
AVIF	有损+无损	✅	✅	90%+	最高压缩率
SVG	矢量	✅	✅	全部	图标、图表

5.1.2 现代图片策略

响应式图片加载策略：

用户请求 image.jpg
    │
    ▼
┌─────────────────────────────────────┐
│ CDN 边缘图片优化引擎                │
│                                     │
│  1. 检测 Accept 头                  │
│     ├── 支持 AVIF → 返回 image.avif │
│     ├── 支持 WebP → 返回 image.webp │
│     └── 仅 JPEG  → 返回 image.jpg  │
│                                     │
│  2. 检测设备尺寸                    │
│     ├── 移动端 → 宽度 640px         │
│     ├── 平板   → 宽度 1024px        │
│     └── 桌面   → 宽度 1920px        │
│                                     │
│  3. 质量参数                        │
│     ├── 高带宽 → quality=85         │
│     └── 低带宽 → quality=60         │
└─────────────────────────────────────┘

5.1.3 HTML 响应式图片

<picture>
    <!-- AVIF 优先 -->
    <source
        type="image/avif"
        srcset="/image/photo-640w.avif 640w,
                /image/photo-1280w.avif 1280w,
                /image/photo-1920w.avif 1920w"
        sizes="(max-width: 640px) 640px,
               (max-width: 1280px) 1280px,
               1920px">
    <!-- WebP 其次 -->
    <source
        type="image/webp"
        srcset="/image/photo-640w.webp 640w,
                /image/photo-1280w.webp 1280w,
                /image/photo-1920w.webp 1920w"
        sizes="(max-width: 640px) 640px,
               (max-width: 1280px) 1280px,
               1920px">
    <!-- JPEG 兜底 -->
    <img src="/image/photo-1280w.jpg"
         alt="Photo"
         loading="lazy"
         decoding="async"
         width="1280" height="720">
</picture>

5.1.4 图片优化效果参考

原始格式	原始大小	WebP (q=80)	AVIF (q=50)	节省比例
JPEG 2MB	2,000 KB	800 KB	400 KB	60-80%
PNG 500KB	500 KB	200 KB	150 KB	60-70%
PNG 50KB (图标)	50 KB	30 KB	25 KB	40-50%

5.2 压缩算法

5.2.1 压缩算法对比

算法	压缩率	压缩速度	解压速度	浏览器支持	说明
Brotli	最高	慢	快	96%+	Google 开发，现代首选
Gzip	中等	快	快	全部	经典方案，兼容性最好
Zstandard	高	快	快	实验中	Facebook 开发

5.2.2 Brotli 压缩级别

级别	压缩率	CPU 消耗	适用场景
1	~70%	极低	实时压缩（边缘）
4	~75%	低	一般网站
6	~78%	中等	推荐级别
9	~82%	高	静态资源预压缩
11	~83%	极高	离线压缩（构建时）

5.2.3 Nginx Brotli 配置

# 动态 Brotli 压缩
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json
             application/javascript text/xml
             application/xml application/xml+rss
             text/javascript image/svg+xml;

# 预压缩静态文件（构建时生成 .br 文件）
brotli_static on;

# Gzip 作为降级方案
gzip on;
gzip_comp_level 6;
gzip_types text/plain text/css application/json
           application/javascript text/xml
           application/xml text/javascript;
gzip_vary on;
gzip_min_length 256;

5.2.4 压缩效果实测

测试资源: 典型 React SPA 首页
原始大小: 2.4 MB (未压缩)

┌─────────────┬──────────┬──────────┬───────────┐
│ 算法         │ 压缩后   │ 压缩率   │ 压缩耗时   │
├─────────────┼──────────┼──────────┼───────────┤
│ 不压缩       │ 2,400 KB │ 0%       │ 0ms       │
│ Gzip (6)    │ 620 KB   │ 74%      │ 8ms       │
│ Brotli (6)  │ 510 KB   │ 79%      │ 15ms      │
│ Brotli (11) │ 460 KB   │ 81%      │ 120ms     │
└─────────────┴──────────┴──────────┴───────────┘

5.3 HTTP/2 与 HTTP/3

5.3.1 HTTP 协议演进

HTTP/1.1 (1997)          HTTP/2 (2015)           HTTP/3 (2022)
┌────────────────┐      ┌────────────────┐      ┌────────────────┐
│ 文本协议        │      │ 二进制帧        │      │ 基于 QUIC       │
│ 串行请求        │      │ 多路复用        │      │ 多路复用         │
│ 无头部压缩      │      │ HPACK 头部压缩  │      │ QPACK 头部压缩   │
│ 无服务器推送    │      │ 服务器推送      │      │ 服务器推送       │
│ TCP 连接        │      │ TCP 连接        │      │ UDP (QUIC)      │
│ 队头阻塞        │      │ TCP 层队头阻塞  │      │ 无队头阻塞       │
└────────────────┘      └────────────────┘      └────────────────┘

5.3.2 HTTP/2 核心优势

特性	HTTP/1.1	HTTP/2	收益
多路复用	6-8 个 TCP 连接	1 连接多流	消除队头阻塞
头部压缩	无（每次全量）	HPACK 静/动态表	减少 30-50% 头部
二进制帧	文本解析	二进制解析	更高效
服务器推送	不支持	Push 资源到客户端	减少往返
流优先级	无	权重 + 依赖树	关键资源优先

5.3.3 Nginx HTTP/2/3 配置

# HTTP/2
server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate     /etc/ssl/certs/example.com.crt;
    ssl_certificate_key /etc/ssl/private/example.com.key;
    ssl_protocols       TLSv1.2 TLSv1.3;
    ssl_ciphers         HIGH:!aNULL:!MD5;

    # HTTP/3 (QUIC)
    listen 443 quic reuseport;
    add_header Alt-Svc 'h3=":443"; ma=86400';

    # 启用 HTTP/2 Server Push（谨慎使用）
    location /index.html {
        http2_push /style/main.css;
        http2_push /script/app.js;
    }
}

5.3.4 HTTP/3 (QUIC) 注意事项

优势	限制
0-RTT 连接建立	UDP 可能被部分网络封锁
连接迁移（Wi-Fi → 4G）	CPU 消耗略高于 TCP
无 TCP 队头阻塞	生态仍在完善
内置 TLS 1.3	需要客户端/CDN 同时支持

5.4 预连接与资源提示

5.4.1 Resource Hints

<head>
    <!-- DNS 预解析：提前解析域名 -->
    <link rel="dns-prefetch" href="//cdn.example.com">
    <link rel="dns-prefetch" href="//analytics.example.com">

    <!-- 预连接：DNS + TCP + TLS（比 dns-prefetch 更进一步） -->
    <link rel="preconnect" href="https://cdn.example.com">
    <link rel="preconnect" href="https://api.example.com" crossorigin>

    <!-- 预获取：提前获取可能需要的页面 -->
    <link rel="prefetch" href="/next-page.html">

    <!-- 预加载：当前页面关键资源，必须加载 -->
    <link rel="preload" href="/font/main.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/style/critical.css" as="style">
    <link rel="preload" href="/image/hero.avif" as="image" type="image/avif">
</head>

5.4.2 Resource Hints 对比

指令	作用	优先级	时机
`dns-prefetch`	仅 DNS 解析	低	浏览器空闲时
`preconnect`	DNS + TCP + TLS	中	尽快
`preload`	当前页面必须资源	高	立即
`prefetch`	下一页可能需要的资源	最低	浏览器空闲时
`prerender`	预渲染整个页面	—	浏览器决定

5.4.3 性能影响估算

典型优化效果（以首次访问为例）：

无优化：
  DNS 解析 → TCP 握手 → TLS 握手 → HTTP 请求 → 响应
  50ms      50ms       50ms       10ms       100ms
  总计: ~260ms

启用 preconnect：
  [DNS+TCP+TLS 已提前完成] → HTTP 请求 → 响应
  0ms (预连接完成)           10ms       100ms
  总计: ~110ms（节省 ~150ms）

启用 preload (关键 CSS)：
  [关键 CSS 已提前下载] → 首屏渲染 → 非关键资源异步加载
  0ms                     首屏快 200-500ms

5.5 TLS 优化

5.5.1 TLS 握手优化

技术	说明	收益
TLS 1.3	1-RTT 握手（TLS 1.2 为 2-RTT）	减少 1 次往返
0-RTT	恢复连接时零往返（配合 TLS 1.3）	首字节更快
OCSP Stapling	服务器预取 OCSP 响应	减少客户端验证延迟
Session Resumption	复用 TLS 会话	跳过密钥交换
Certificate Compression	压缩证书链	减少握手数据量

5.5.2 Nginx TLS 优化配置

server {
    # TLS 1.3 + 0-RTT
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_early_data on;  # 0-RTT

    # OCSP Stapling
    ssl_stapling on;
    ssl_stapling_verify on;
    ssl_trusted_certificate /etc/ssl/certs/ca-chain.crt;
    resolver 8.8.8.8 8.8.4.4 valid=300s;

    # Session 复用
    ssl_session_cache shared:SSL:50m;
    ssl_session_timeout 1d;
    ssl_session_tickets on;

    # 现代密码套件
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers on;

    # ECDH 曲线
    ssl_ecdh_curve X25519:secp384r1:secp256r1;
}

5.6 边缘计算优化

5.6.1 边缘计算场景

场景	技术	说明
A/B 测试	Cookie 注入 + 重写	边缘分流，无需回源
URL 重写	边缘路由规则	减少回源
认证鉴权	JWT 验证	边缘校验 Token
个性化	边缘渲染	ESI / Edge SSR
API 聚合	边缘组合多 API	减少客户端请求数
地理限制	GeoIP + 重定向	边缘判断地理位置

5.6.2 Cloudflare Workers 示例

// 边缘 JWT 验证示例
export default {
  async fetch(request) {
    const url = new URL(request.url);

    // 不需要认证的路径
    const publicPaths = ['/login', '/register', '/health'];
    if (publicPaths.includes(url.pathname)) {
      return fetch(request);
    }

    // 验证 JWT
    const token = request.headers.get('Authorization')?.replace('Bearer ', '');
    if (!token) {
      return new Response(JSON.stringify({ error: 'Unauthorized' }), {
        status: 401,
        headers: { 'Content-Type': 'application/json' }
      });
    }

    try {
      const payload = await verifyJWT(token);
      // 将用户信息添加到请求头，传递给源站
      const modifiedRequest = new Request(request, {
        headers: {
          ...Object.fromEntries(request.headers),
          'X-User-Id': payload.sub,
          'X-User-Role': payload.role,
        }
      });
      return fetch(modifiedRequest);
    } catch (e) {
      return new Response(JSON.stringify({ error: 'Invalid token' }), {
        status: 403,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  }
}

5.7 性能监控指标

5.7.1 核心 Web 指标 (Core Web Vitals)

指标	英文全称	良好阈值	衡量维度
LCP	Largest Contentful Paint	< 2.5s	加载速度
INP	Interaction to Next Paint	< 200ms	交互响应
CLS	Cumulative Layout Shift	< 0.1	视觉稳定性
TTFB	Time to First Byte	< 800ms	服务器响应
FCP	First Contentful Paint	< 1.8s	首次渲染

5.7.2 CDN 层面监控

指标	说明	目标值
Cache Hit Ratio	缓存命中率	> 85%
Edge Latency	边缘处理延迟	< 10ms
Origin Latency	回源延迟	< 200ms
Bandwidth Saved	带宽节省比例	> 70%
Error Rate	5xx 错误率	< 0.1%

5.8 注意事项

⚠️ 0-RTT 重放攻击：TLS 1.3 的 0-RTT 数据可被重放，不应用于非幂等请求（如 POST、支付）。
⚠️ HTTP/2 Server Push：已被 Chrome 移除支持，建议改用 103 Early Hints。
⚠️ Brotli 动态压缩：级别 10-11 的 CPU 消耗极高，仅用于构建时预压缩，不适合实时压缩。
⚠️ 图片格式兼容：AVIF 虽压缩率最高，但旧浏览器不支持，务必提供 WebP/JPEG 兜底。

5.9 扩展阅读

Web.dev - Core Web Vitals — Google 核心性能指标
Brotli RFC 7932 — Brotli 压缩规范
HTTP/3 RFC 9114 — HTTP/3 规范
Can I Use — 浏览器兼容性查询
Lighthouse — 网站性能审计工具

本章小结

主题	核心要点
图片优化	WebP/AVIF 格式优先 + 响应式尺寸
压缩	Brotli 6 级动态压缩，11 级静态预压缩
HTTP/2+	多路复用 + 头部压缩 + TLS 1.3
预连接	preconnect/preload 减少关键路径延迟
边缘计算	在边缘处理认证、路由、个性化

下一章：第06章 WAF 基础原理 →

强曰为道

第05章 CDN 性能优化

第05章 CDN 性能优化

5.1 图片优化

5.1.1 图片格式对比

5.1.2 现代图片策略

5.1.3 HTML 响应式图片

5.1.4 图片优化效果参考

5.2 压缩算法

5.2.1 压缩算法对比

5.2.2 Brotli 压缩级别

5.2.3 Nginx Brotli 配置

5.2.4 压缩效果实测

5.3 HTTP/2 与 HTTP/3

5.3.1 HTTP 协议演进

5.3.2 HTTP/2 核心优势

5.3.3 Nginx HTTP/2/3 配置

5.3.4 HTTP/3 (QUIC) 注意事项

5.4 预连接与资源提示

5.4.1 Resource Hints

5.4.2 Resource Hints 对比

5.4.3 性能影响估算

5.5 TLS 优化

5.5.1 TLS 握手优化

5.5.2 Nginx TLS 优化配置

5.6 边缘计算优化

5.6.1 边缘计算场景

5.6.2 Cloudflare Workers 示例

5.7 性能监控指标

5.7.1 核心 Web 指标 (Core Web Vitals)

5.7.2 CDN 层面监控

5.8 注意事项

5.9 扩展阅读

本章小结