Next.js Chrome和Web Vitals上的不同TTFB值

我注意到Chrome网络选项卡和WebVitals记录的TTBF值不同。理想情况下，它应该是完全相同的值，但在某些情况下，有时会出现2-3秒的巨大差异

我正在使用Next.js和用于记录各自的性能指标

下面是一个示例，以及供参考的屏幕截图

使用

performance.timing.responseStart-performance.timing.requestStart

返回的值比依赖WebVitals TTFB值更合适

知道会出什么问题吗？是WebVitals上的一个bug，我不应该使用它，也不应该在消费/记录值时出错

---

在web性能社区中，

reportWebVitals（以及底层库）提供的数字通常被认为是正确的TTFB（尽管公平地说，不同工具的实现存在一些差异）

我相信DevTools会将较小的数字标记为“等待（TTFB）”，作为一种非正式的提示，告诉用户“等待”是为了给它提供上下文，因为它通常是TTFB时间的绝大部分

但是，从以用户为中心的角度来看，第一个字节的时间实际上应该包括从用户开始导航到页面到服务器使用该页面的第一个字节响应的所有时间，包括DNS解析、连接协商、重定向（如果有）的时间，DevTools确实在屏幕截图中包含了至少一些关于额外时间的信息，只是在表面上的TTFB编号上方分为不同的时段（参见“排队”、“暂停”和“请求发送”条目）

通常情况下，web性能可以作为讨论web性能的真实来源。它放置：

在整个工作过程中，从开始导航文档[]起，所有时间值都以毫秒为单位进行测量。例如，文档导航的开始时间为0

然后作为

用户代理的HTTP解析器收到响应的第一个字节后的时间

因此
performance.timing.responseStart-performance.timing.navigationStart
本身就是浏览器对TTFB的度量（或者
performance.getEntriesByType（'navigation'）[0]。在较新的导航计时级别2 API中，responseStart
），这也是数字
webvitals
。
由
reportWebVitals
（以及底层库）提供的数字通常被认为是web性能社区中正确的TTFB（尽管公平地说，不同工具在实现上存在一些差异）

我相信DevTools会将较小的数字标记为“等待（TTFB）”，作为一种非正式的提示，告诉用户“等待”是为了给它提供上下文，因为它通常是TTFB时间的绝大部分

但是，从以用户为中心的角度来看，第一个字节的时间实际上应该包括从用户开始导航到页面到服务器使用该页面的第一个字节响应的所有时间，包括DNS解析、连接协商、重定向（如果有）的时间，DevTools确实在屏幕截图中包含了至少一些关于额外时间的信息，只是在表面上的TTFB编号上方分为不同的时段（参见“排队”、“暂停”和“请求发送”条目）

通常情况下，web性能可以作为讨论web性能的真实来源。它放置：

在整个工作过程中，从开始导航文档[]起，所有时间值都以毫秒为单位进行测量。例如，文档导航的开始时间为0

然后作为

用户代理的HTTP解析器收到响应的第一个字节后的时间

因此
performance.timing.responseStart-performance.timing.navigationStart
本身就是浏览器对TTFB的度量（或者
performance.getEntriesByType（'navigation'）[0]。在较新的导航计时级别2 API中，responseStart
），这也是数字
web vitals