Chrome Timing 性能优化

根据 Chrome DevTools Timing 指标分析和优化页面性能

问题

如何根据 Chrome DevTools 的 Timing 指标进行性能优化？

解答

Timing 指标解读

在 Chrome DevTools 的 Network 面板中，点击请求可以看到 Timing 选项卡，包含以下阶段：

Queueing        → 请求排队等待
Stalled         → 请求停滞
DNS Lookup      → DNS 解析
Initial Connection → TCP 连接建立
SSL             → SSL/TLS 握手
TTFB            → 等待服务器响应（Time To First Byte）
Content Download → 内容下载

各阶段优化策略

1. Queueing / Stalled 过长

浏览器对同一域名有并发连接限制（Chrome 为 6 个）。

// 问题：同一域名请求过多
// 优化方案：使用域名分片或 HTTP/2

// 方案1：域名分片（HTTP/1.1）
const cdn1 = 'https://cdn1.example.com';
const cdn2 = 'https://cdn2.example.com';

// 方案2：升级 HTTP/2（推荐）
// 服务器配置支持 HTTP/2，支持多路复用

2. DNS Lookup 过长

<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="//api.example.com">
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- 预连接（包含 DNS + TCP + TLS） -->
<link rel="preconnect" href="https://api.example.com">

3. Initial Connection / SSL 过长

// 服务端优化
// 1. 启用 TLS 1.3（握手只需 1-RTT）
// 2. 启用 HTTP/2（复用连接）
// 3. 使用 CDN（就近接入）

// 客户端优化：预连接关键资源
const link = document.createElement('link');
link.rel = 'preconnect';
link.href = 'https://api.example.com';
document.head.appendChild(link);

4. TTFB 过长

TTFB 反映服务器处理时间，优化方向：

// 后端优化
// 1. 数据库查询优化、添加索引
// 2. 使用缓存（Redis）
// 3. 代码逻辑优化

// 前端配合
// 使用缓存策略
fetch('/api/data', {
  headers: {
    'Cache-Control': 'max-age=3600'
  }
});

# Nginx 配置缓存
location /api/ {
    proxy_cache_valid 200 1h;
    add_header X-Cache-Status $upstream_cache_status;
}

5. Content Download 过长

// 1. 压缩资源
// Nginx 开启 gzip
// gzip on;
// gzip_types text/plain application/json application/javascript text/css;

// 2. 图片优化
// 使用 WebP 格式
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="fallback">
</picture>

// 3. 代码分割
// webpack 配置
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      maxSize: 244000 // 244KB
    }
  }
};

完整优化检查清单

<!DOCTYPE html>
<html>
<head>
  <!-- DNS 预解析 -->
  <link rel="dns-prefetch" href="//cdn.example.com">
  
  <!-- 预连接关键域名 -->
  <link rel="preconnect" href="https://api.example.com" crossorigin>
  
  <!-- 预加载关键资源 -->
  <link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
  <link rel="preload" href="/css/critical.css" as="style">
  
  <!-- 内联关键 CSS -->
  <style>/* critical css */</style>
  
  <!-- 异步加载非关键 CSS -->
  <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'">
</head>
<body>
  <!-- 内容 -->
  
  <!-- 延迟加载非关键 JS -->
  <script src="/js/main.js" defer></script>
</body>
</html>

使用 Performance API 监控

// 获取页面加载性能数据
const timing = performance.getEntriesByType('navigation')[0];

const metrics = {
  // DNS 查询时间
  dns: timing.domainLookupEnd - timing.domainLookupStart,
  // TCP 连接时间
  tcp: timing.connectEnd - timing.connectStart,
  // SSL 握手时间
  ssl: timing.connectEnd - timing.secureConnectionStart,
  // TTFB
  ttfb: timing.responseStart - timing.requestStart,
  // 内容下载时间
  download: timing.responseEnd - timing.responseStart,
  // DOM 解析时间
  domParse: timing.domContentLoadedEventEnd - timing.responseEnd,
  // 总加载时间
  total: timing.loadEventEnd - timing.fetchStart
};

console.table(metrics);

// 上报到监控系统
navigator.sendBeacon('/analytics', JSON.stringify(metrics));

关键点

Queueing/Stalled：升级 HTTP/2 解决并发限制，或使用域名分片
DNS Lookup：使用 dns-prefetch 和 preconnect 预解析
TTFB：后端优化（缓存、数据库、CDN）是关键
Content Download：开启 Gzip、使用 WebP、代码分割减小体积
监控：使用 Performance API 持续监控，建立性能基线