无需登录 数据私有 本地保存

网页资源瀑布图展示 - 请求时间线和大小

9
0
0
0
缩放:
类型: 全部 HTML JS CSS 图片 字体 XHR/Fetch 其他
排队/阻塞 DNS TCP连接 SSL 发送 等待TTFB 下载
0
总请求数
0 KB
总大小
0 ms
总加载时间
0 ms
平均TTFB
0
错误 (4xx/5xx)
0
缓存命中
资源详情
常见问题与知识点

瀑布图是一种可视化工具，展示网页加载过程中每个资源请求的时间线。横轴表示时间（毫秒），每个资源占一行，用不同颜色标示DNS查询、TCP连接、SSL握手、TTFB（首字节时间）、内容下载等阶段。它帮助开发者快速定位性能瓶颈，类似于Chrome DevTools的Network面板。

在Chrome/Edge浏览器中：打开开发者工具（F12）→ Network面板 → 刷新页面加载资源 → 右键任意请求 → "Save all as HAR with content"。在Firefox中：Network面板 → 右键 → "Save All As HAR"。导出的.har文件可以直接拖入本工具进行可视化分析。

TTFB（Time To First Byte）即首字节时间，指从浏览器发起请求到接收到服务器响应第一个字节的时间。它包含了网络延迟、服务器处理时间。较长的TTFB通常意味着服务器端性能问题、网络延迟高或DNS解析慢。理想的TTFB应在200ms以内，超过500ms就需要关注。

  • 灰色（排队/阻塞）：请求在浏览器队列中等待或被其他请求阻塞的时间。
  • 浅绿（DNS查询）：将域名解析为IP地址的时间。
  • 橙色（TCP连接）：建立TCP连接的三次握手时间。
  • 紫色（SSL）：HTTPS连接的SSL/TLS握手时间。
  • 黄色（发送）：发送HTTP请求数据的时间。
  • 青绿（等待TTFB）：等待服务器响应首字节的时间。
  • 蓝色（下载）：接收响应内容的时间。

当transferSize为0时，通常表示资源从浏览器缓存中加载（disk cache或memory cache），没有通过网络传输。这是性能优化的理想状态——合理设置HTTP缓存头（Cache-Control、ETag、Expires）可以最大化缓存命中率，减少网络请求。

浏览器内置的Resource Timing API通过performance.getEntriesByType('resource')提供每个资源的详细时序数据。本工具的"扫描当前页"功能正是利用该API。它返回startTime、duration、domainLookupStart/End、connectStart/End、requestStart、responseStart/End等精确时间戳，精度可达微秒级。
🔧 相关工具