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

Question

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

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

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

这是我正在做的事情：

    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%。

我没有正确测量这个吗？

标签： javascriptperformancefetchgoogle-chrome-devtools

Answer 1

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

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