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

Performance API 数据仪表盘 - 导航时序与资源统计

13
0
0
0

Performance API 数据仪表盘

导航时序 · 资源统计 · Web Vitals
总加载时间
--
DOM可交互
--
资源总数
--
传输总大小
--
FCP
--
缓存命中率
--
导航时序 (Navigation Timing) 总耗时 --
Web Vitals 核心指标
部分指标需要 PerformanceObserver 持续监测
当前快照可能无法完整获取
资源加载瀑布图 (Waterfall) 显示前 40 个资源 · 点击条形查看详情
暂无资源数据
资源详情列表
筛选：
资源URL 类型 大小 开始 耗时 时间条
共 0 个资源
常见问题与知识点 (FAQ)

Performance API 是浏览器提供的一组接口，用于精确测量网页性能。它包括 Navigation Timing（导航时序）、Resource Timing（资源加载时序）、Paint Timing（绘制时间）以及 Web Vitals（核心性能指标）。通过 performance.getEntriesByType() 等方法可以获取详细的性能数据。

导航时序主要包含：重定向（redirectStart→redirectEnd）、DNS查询（domainLookupStart→domainLookupEnd）、TCP连接（connectStart→connectEnd）、TLS握手（secureConnectionStart→connectEnd）、请求等待/TTFB（requestStart→responseStart）、响应下载（responseStart→responseEnd）、DOM处理（domInteractive→domComplete）、加载事件（loadEventStart→loadEventEnd）。

跨域资源如果没有设置 Timing-Allow-Origin 响应头，浏览器出于安全考虑会屏蔽详细的时间数据（如DNS、TCP、请求时间等），仅暴露 startTime 和 duration。另外，从缓存加载的资源 transferSize 可能为0。

TTFB（Time To First Byte）是从发送请求到收到第一个响应字节的时间。优化方向包括：使用CDN减少网络延迟、优化后端处理逻辑、启用缓存、使用HTTP/2或HTTP/3、减少重定向次数、选用高性能服务器等。通常 TTFB 应控制在 800ms 以内。

FCP（First Contentful Paint）是首次内容绘制时间，即浏览器首次渲染任何文本、图片、Canvas等的时间点。LCP（Largest Contentful Paint）是最大内容绘制时间，即视口内最大可见元素（如图片、视频、文本块）完成渲染的时间。LCP更能反映用户感知的加载速度，Google建议LCP应在2.5秒以内。

提高缓存命中率的策略：设置合理的 Cache-Control 和 Expires 头、使用版本化文件名（如带hash的文件名）、启用Service Worker缓存、使用CDN的边缘缓存、对静态资源设置较长的缓存时间。本工具中 transferSize=0 的资源即来自缓存。

DOM处理时间（domInteractive到domComplete）过长通常意味着：HTML文档过大、同步脚本阻塞解析、过多的DOM节点。优化建议：减少DOM深度、使用异步脚本（async/defer）、拆分大HTML文档、优化CSS选择器、减少布局抖动、使用虚拟滚动处理长列表。
🔧 相关工具