计算和验证首字节时间 (TTFB)

Posted 2023-03-07

【中文标题】计算和验证首字节时间 (TTFB)

【英文标题】：Calculating and verifying Time To First Byte (TTFB)

【发布时间】：2016-05-19 16:43:51

【问题描述】：

我得到了以下公式来测量首字节时间 (TTFB)、TTFB 到 DOM 就绪和页面加载。

TTFB

window.performance.timing.responseStart - window.performance.timing.navigationStart

TTFB 到 DOM 就绪

window.performance.timing.domComplete - window.performance.timing.navigationStart

页面加载

window.performance.timing.loadEventStart - window.performance.timing.navigationStart

这些公式正确吗？我怎样才能检查它们？我听说您可以在 Firebug 的 Network 面板中测量它们，但在检索这些值时似乎总体上很麻烦。不确定您在 Chrome 中从哪里获得这些值。

那么，如何确定这些测量值？

【问题讨论】：

你从哪里得到这些公式的？

【参考方案1】：

Firebug 实际上使查看这些时间变得非常容易。您只需要在其命令行中执行window.performance.timing，它就会显示一个图表并列出下面的所有时间，如下所示：

另外，根据description on MDN，我认为您的计算应该从fetchStart 开始，因为那是浏览器准备好使用HTTP 请求获取文档的时刻。根据您对 DOM Ready 的定义，该测量的结束时间也可能是 domInteractive 或 domContentLoadedEventStart 时间。

所以，我想说正确的测量是：

TTFB

window.performance.timing.responseStart - window.performance.timing.fetchStart

TTFB 到 DOM 就绪

window.performance.timing.domInteractive - window.performance.timing.fetchStart

页面加载

window.performance.timing.loadEventStart - window.performance.timing.fetchStart

【讨论】：

Firebug 时序图看起来不准确 - 我怀疑浏览器等到收到整个 html 后才开始解析 DOM。

你是对的，关于 DOM 处理的图表是不正确的。目前（Firebug 2.0.14）是指从responseEnd 到loadEventStart 的时间，而实际上应该是domLoading 和domInteractive 或domComplete 之间的时间。我已经为此提交了issue 7993。不过，您可以从表格中读取正确的时间。

【参考方案2】：

这可以使用 Chrome 的网络标签来确认：

TTFB 示例：

window.performance.timing.responseStart - window.performance.timing.requestStart