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

Web Performance API 浏览器 - 查看所有时间指标

开发工具 性能 Performance API 指标 时间 浏览器
18
0
0
0

Web Performance API 浏览器

实时查看页面加载性能指标 & Web Vitals
DNS 查询
-- ms
域名解析
TCP 连接
-- ms
三次握手
TLS 握手
-- ms
安全连接
TTFB
-- ms
首字节时间
DOM 解析
-- ms
DOM构建完成
页面加载
-- ms
完全加载
页面加载时间线
正在解析...
总耗时: -- ms
Navigation Timing 详细指标
指标名称 耗时 (ms) 说明
正在读取数据...
Web Vitals 核心指标
LCP 最大内容绘制
衡量加载体验
--
FID 首次输入延迟
衡量交互体验
--
CLS 累积布局偏移
衡量视觉稳定性
--
FCP 首次内容绘制
首次视觉反馈
--
部分指标需要用户交互或页面稳定后才能获取
资源加载分析 0
资源名称 类型 耗时 大小 开始时间 缓存
正在读取资源数据...
Paint Timing 绘制时间
FP (首次绘制) -- ms
FCP (首次内容绘制) -- ms
FCP vs FP 间隔 -- ms
内存使用 (若可用)
JS 堆已用 --
JS 堆总大小 --
JS 堆限制 --
* memory API 仅在 Chromium 内核浏览器中可用
原始 Performance 数据 (JSON)
正在生成...
常见问题与知识点
什么是 TTFB（首字节时间）？如何优化？
TTFB (Time to First Byte) 是指浏览器从发起请求到接收到服务器响应的第一个字节所花费的时间，包含 DNS 查询、TCP 连接、TLS 握手和服务器处理时间。优化建议：使用 CDN 加速、启用 HTTP/2 或 HTTP/3、优化后端逻辑减少服务器响应时间、使用缓存策略。
LCP、FID、CLS 三大 Web Vitals 指标的阈值是多少？
LCP (最大内容绘制)： ≤2.5秒为优秀，2.5-4秒需改进，>4秒较差。
FID (首次输入延迟)： ≤100ms为优秀，100-300ms需改进，>300ms较差。
CLS (累积布局偏移)： ≤0.1为优秀，0.1-0.25需改进，>0.25较差。
这些阈值由 Google 制定，是 Core Web Vitals 的核心评估标准，直接影响 SEO 排名。
Navigation Timing API 和 Resource Timing API 有什么区别？
Navigation Timing API 提供页面导航和加载的完整时间线指标（如 DNS、TCP、请求、DOM 解析等），用于衡量整个页面的加载性能。
Resource Timing API 则提供页面上每一个子资源（JS、CSS、图片、字体等）的详细加载时间，用于分析单个资源的加载瓶颈。
为什么有些指标显示为 0 或不可用？
指标为 0 的常见原因：
• DNS/TCP/TLS 为 0：资源来自缓存或使用了持久连接（keep-alive），跳过了这些阶段。
• FID 无数据：用户尚未进行任何交互（点击、触摸等）。
• CLS 为 0：页面布局稳定，没有发生偏移。
• 内存 API 不可用：部分浏览器（如 Firefox、Safari）不支持 performance.memory。
如何使用 PerformanceObserver 持续监控性能指标？
使用 PerformanceObserver 可以实时监听性能条目。示例：
new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => console.log(entry));
}).observe({ type: 'largest-contentful-paint', buffered: true });
设置 buffered: true 可以获取观察器注册前已经产生的性能条目，确保不遗漏关键数据。
为什么这个工具显示的指标与我用 Chrome DevTools 看到的不完全一致？
本工具直接从浏览器的 Performance API 读取原始数据。与 Chrome DevTools 的细微差异可能源于：四舍五入精度不同、统计口径差异（DevTools 可能包含额外的处理时间）、以及部分指标（如 LCP）可能在页面持续交互中动态更新。本工具展示的是 API 返回的精确值，适合开发者进行编程式的性能分析。
🔧 相关工具