比较性能API和chrome的开发者工具的计时结果时的差异答案

【问题标题】：Difference when comparing the timing results of performance API and chrome's developer tools比较性能API和chrome的开发者工具的计时结果时的差异
【发布时间】：2021-04-21 18:56:57
【问题描述】：

我正在尝试为fetch 通话计时。以下屏幕截图显示了 chrome 开发人员工具针对特定提取请求显示的时间。

从红色标记的请求可以看出，它花费的总时间是79 milliseconds。看起来不错。

当我尝试使用performance api 计时时，163.46000001067296 ms 的毫秒数超过 100%。怎么会这样？

这是我正在做的事情：

    loadInitVariables() {
        const queryString = this.formQueryString(this.queryStringParams);
        const t0 = performance.now(); // TIMESTAMP ONE @ T0
        return fetch(`${this.initVariablesPath}${queryString}`, {
            method: "get",
            headers: { "Content-Type": "application/json" },
        })
            .then(response => {
                const t1 = performance.now(); // TIMESTAMP 2 @ T1
                log.debug(`Loaded init vars in ${t1 - t0} ms.`);
                return response.json();
            })
    }

为什么会有这种差异？如果它可以是几毫秒，即 +10 - +20，那会没问题，但它会超过 100%。

我没有正确测量这个吗？

【问题讨论】：

标签： javascript performance fetch google-chrome-devtools

【解决方案1】：

考虑这个例子，网络选项卡中显示的时间包括排队、开始、停止时间（如果有）、发送、等待。

与performance.now 的时差似乎不包括这些数字

【讨论】：

有没有办法获得TTFB ？
@SuhailGupta 不确定PerformanceTiming.responseStart 是否有帮助
var ttfb = navigationEntries.responseStart - navigationEntries.requestStart;