性能 API 和 chrome 的开发者工具的时序结果对比时的差异

如何解决性能 API 和 chrome 的开发者工具的时序结果对比时的差异

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

我测量得不正确吗？

解决方法

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

与 home/css/custom.css 的时差似乎不包括这些数字