WebPageTest 瀑布图在线分析 - 解读性能详情

瀑布图（Waterfall Chart）是 WebPageTest 的核心可视化工具，以时间轴形式展示页面加载过程中每一个网络请求的完整生命周期。每条横条代表一个资源（JS、CSS、图片、字体等），不同颜色区分 DNS 查询、TCP 连接、SSL 握手、TTFB（首字节时间）和内容下载等阶段。通过瀑布图，可以直观发现阻塞请求、长等待时间、慢速下载等性能瓶颈。

方法一（Chrome DevTools）：打开开发者工具（F12）→ Network 标签 → 刷新页面 → 右键任意请求 → "Save all as HAR with content" → 保存为 .har 文件，用文本编辑器打开复制内容。
方法二（WebPageTest）：在 webpagetest.org 运行测试后，在结果页点击 "Export HAR" 即可下载。
方法三（Firefox）：开发者工具 → Network → 右键 → "Save All As HAR"。

红色（阻塞）：请求在浏览器队列中等待的时间，通常受浏览器并发连接数限制（HTTP/1.1 每域名 6 个）。
深绿（DNS）：域名解析时间，过长说明 DNS 服务器响应慢。
橙色（连接）：TCP 三次握手时间。
紫色（SSL）：TLS/SSL 握手时间，仅在 HTTPS 请求中出现。
绿色（等待/TTFB）：从发送请求到收到第一个响应字节的时间，反映服务器处理速度。
蓝色（下载）：接收响应内容的时间，与资源大小和网络带宽相关。

优秀：< 200ms（同一数据中心）
良好：200-500ms
需要优化：500-1000ms
严重问题：> 1000ms

优化建议：使用 CDN 加速静态资源、启用 HTTP/2 或 HTTP/3、优化后端数据库查询、使用缓存（Redis/Memcached）、采用边缘计算（Edge Functions）、优化服务器配置。

1. 使用 HTTP/2 或 HTTP/3：多路复用技术可大幅减少并发连接限制带来的阻塞。
2. 域名分片（Domain Sharding）：将资源分布到多个域名，突破浏览器每域名 6 个并发连接的限制（HTTP/1.1 场景）。
3. 关键资源内联：将关键 CSS/JS 直接内联到 HTML 中，减少关键路径上的请求数量。
4. 资源合并：使用打包工具（Webpack/Vite）合并 JS/CSS 文件，减少请求总数。
5. 预连接：使用 <link rel="preconnect"> 提前建立关键域名的连接。

WebPageTest 瀑布图更详细地展示了 DNS、TCP 连接和 SSL 握手等底层网络阶段，而 Chrome DevTools 默认将这些合并显示。WebPageTest 还提供多地点、多浏览器、多连接速度的测试能力，更适合深入诊断真实用户的加载体验。但两者的 HAR 数据格式兼容，可以在本工具中通用分析。