比较性能 API 和 chrome 的开发人员工具的计时结果时的差异

Question

我正在尝试为 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%。

我测量得不正确吗？

Answer 1

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

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

比较性能 API 和 chrome 的开发人员工具的计时结果时的差异

Difference when comparing the timing results of performance API and chrome's developer tools

javascript

performance

fetch

google-chrome-devtools