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

资源加载时间查看 - Performance API瀑布

开发工具 性能工具 分析 性能 资源
34
0
0
0
跨域URL将无法获取详细数据
页面预览
跨域限制：无法获取iframe内页面的详细性能数据。请在目标页面控制台运行 performance.getEntries... 并将结果粘贴回此工具。
-
资源总数
-
DOMContentLoaded
-
Load 事件
-
总传输大小
-
最慢资源
-
TTFB (首字节)
资源加载瀑布图 时间范围: -

暂无资源数据

点击"分析当前页"查看本页面资源瀑布图，或输入URL加载目标页面
资源详情 共 0 条
资源URL 类型 大小 开始(ms) 耗时(ms) TTFB(ms) DNS(ms) TCP(ms)
暂无数据
常见问题 & 知识点

资源瀑布图通过 Resource Timing API（Performance API 的一部分）可视化展示页面加载过程中每个资源（JS、CSS、图片、字体等）的加载时序。横轴是时间，纵轴列出各个资源，色块表示资源从开始请求到完成下载的时间跨度，帮助开发者直观识别性能瓶颈。

TTFB = responseStart - requestStart，即从浏览器发送请求到收到服务器响应第一个字节的时间。优化建议：使用CDN缩短网络距离；启用HTTP/2或HTTP/3；优化后端处理逻辑；使用缓存策略；选择响应更快的主机服务。

transferSize=0 通常表示资源从浏览器缓存中加载，没有经过网络传输。这是最佳性能状态。如果资源来自本地缓存（disk cache 或 memory cache），transferSize 为 0，但 encodedBodySize 和 decodedBodySize 可能仍有值。注意：跨域资源且未设置 Timing-Allow-Origin 头时，transferSize 也会显示为 0。

Resource Timing API 出于隐私和安全考虑，对跨域资源默认只暴露 startTime 和 duration。要获取详细时间（DNS、TCP、TTFB等），服务器需要响应 Timing-Allow-Origin: *（或指定域名）的HTTP头。您可以在目标页面控制台运行本工具提供的代码片段来收集完整数据。

瀑布图色块中：浅色段表示浏览器排队等待和连接建立时间；中间段表示等待服务器响应（TTFB）；深色段表示实际下载内容的时间。如果等待段很长，说明网络延迟高或服务器响应慢；如果下载段很长，说明资源体积大或带宽不足。

打开目标页面，按 F12 打开开发者工具控制台，粘贴以下代码并回车，复制输出的JSON数据，然后回到本工具点击"粘贴数据"按钮进行分析：
copy(JSON.stringify(performance.getEntriesByType('resource').map(r=>({name:r.name,initiatorType:r.initiatorType,startTime:Math.round(r.startTime*100)/100,duration:Math.round(r.duration*100)/100,transferSize:r.transferSize,domainLookupStart:r.domainLookupStart,domainLookupEnd:r.domainLookupEnd,connectStart:r.connectStart,connectEnd:r.connectEnd,requestStart:r.requestStart,responseStart:r.responseStart,responseEnd:r.responseEnd}))))
🔧 相关工具