HTTP瀑布图是网络性能分析的核心可视化工具，它以横向条形图的形式展示每个HTTP请求的完整生命周期。每个条形按时间线分解为DNS解析、TCP连接、TLS握手、请求发送、等待TTFB（首字节时间）和内容下载等阶段。通过瀑布图，开发者可以一目了然地识别性能瓶颈——比如某个资源的TTFB过长说明服务器响应慢，下载时间长说明资源体积过大需要优化。

🟢 绿色 - DNS解析：将域名转换为IP地址的时间，通常几毫秒到几十毫秒。可通过DNS预解析（<link rel="dns-prefetch">）优化。
🟠 橙色 - TCP连接：建立TCP三次握手的时间，通常10-50ms。使用HTTP/2或HTTP/3可复用连接减少此阶段。
🟣 紫色 - TLS握手：HTTPS的SSL/TLS协商时间，通常20-100ms。使用TLS 1.3可减少往返次数。
🔵 浅蓝 - 请求发送：将HTTP请求发送到服务器的时间，通常<1ms。
🟡 黄色 - 等待TTFB：从请求发送到收到第一个响应字节的时间，反映服务器处理性能。优化后端逻辑和数据库查询可缩短TTFB。
🔵 深蓝 - 内容下载：接收响应体的时间，取决于资源大小和网络带宽。启用压缩（Gzip/Brotli）和CDN可加速下载。

点击「分析当前页面」按钮，工具会调用浏览器内置的 performance.getEntriesByType('resource') API，获取当前页面所有已加载资源（CSS、JS、图片、字体、XHR等）的精确时序数据。这些数据由浏览器在资源加载时自动记录，包含DNS、TCP、TLS、TTFB等详细阶段，精度可达微秒级别。这是生产环境中最为可靠的性能数据来源，与Chrome DevTools Network面板的数据完全一致。

HAR（HTTP Archive）是一种标准化的JSON格式，用于记录浏览器与服务器之间的所有HTTP交互。你可以在Chrome DevTools的Network面板中右键导出HAR文件，也可以从Charles Proxy、Fiddler等抓包工具导出。点击「导入HAR」按钮选择.har文件即可自动解析其中的请求时序数据并生成瀑布图。这是分析他人网站性能或保存测试结果的常用方式。

1. 减少DNS查询：如果DNS阶段过长，使用DNS预解析或减少第三方域名数量。
2. 复用连接：TCP和TLS阶段多的资源，考虑升级到HTTP/2实现多路复用。
3. 优化TTFB：等待时间长的请求，检查服务器端性能（数据库查询、API逻辑、缓存策略）。
4. 压缩资源：下载时间长的资源，启用Brotli压缩、使用CDN、优化资源体积。
5. 并行加载：观察瀑布图的层叠情况，尽量让资源并行加载而非串行等待。
6. 关键资源优先：确保关键CSS和JS尽早加载，避免阻塞渲染。