为什么 Chrome 网络计时选项卡中显示的获取请求时间和请求时间不同？

Question

我试图理解为什么我的应用程序记录的总提取请求时间与 Chrome 开发工具“网络 > 计时”选项卡中显示的时间不同。

考虑这个示例，记录获取开始时间和获取响应时间之间的差异：

const startTime = new Date();
fetch('https://somedomain.com/api/route')
  .then(res => {
    const completeTime = new Date().getTime();
    console.log(completeTime - startTime)
  })

现在，当我检查 Chrome 的“网络”选项卡时，单击列表中的请求，然后单击“计时”选项卡 - 我会看到请求不同阶段的细分，底部列出了总时间。该时间始终小于上面示例中记录的时间。通常差异是 1-10 毫秒，但我观察到差异高达几百毫秒。

什么因素影响这种差异？

Answer 1

尝试通过 JS 监控 fetch 请求几乎毫无意义。 我会解释为什么：

首先，你是铬“之上”的几层。您正在浪费时间实例化新的日期对象、检索其时间戳、生成获取请求（JS 插入到事件循环中的承诺）以及由于 JS JIT 编译过程而产生的更多开销。这可以解释几个额外的毫秒（我猜不到 100）。

第二，Promise 被插入到事件循环队列中，并且只有在服务器响应期间运行的队列结束后才会被处理。这意味着即使在收到 HTTP 响应之后，当前队列也可能需要一段时间才能完成（例如，如果您正在进行一些数学计算）。这可能会额外增加几十毫秒（我猜最多可达几百毫秒）。

third，最重要的是 Chrome 每个域的最大并行连接数，默认为 6。这意味着，如果您的页面正在发送超过 6 个 HTTP 请求，则其中一些请求直到之前的请求才会被触发他们已经完成了。我做了一个测试，尝试获取 9 个不同的东西，第一个请求的额外毫秒约为 200 毫秒，但第 7-9 个请求的额外毫秒高达约 1500 毫秒！

我希望我没有遗漏任何其他可能影响JS在这件事上的不准确性的事情。 干杯！