Chrome DevTools 网络性能分析中的胡须代表什么？

Question

我正在分析网络请求的计时，我发现与 Network 选项卡相比，性能选项卡提供了有关计时的更多信息。

在下面的屏幕截图中，请求显示为长须，我想了解它们是什么以及在可能的情况下减少它们的常用方法。

Answer 1

谷歌称其为“线条表示”而不是“盒须图”，但这就是您要寻找的：

• 左边的胡须是请求发送之前的所有内容，不包括请求发送本身。
• 正确的胡须是在主线程中等待的时间，正如@wOxxOm 上面评论的那样，这是响应通过网络返回的时间，但浏览器正忙于做其他事情，以至于您的代码尚未收到它。

盒子本身也分为明暗部分，详细信息如下。

根据开发人员参考，这是相关的部分：

图 24. www.google.com 请求的线条表示

在图 24 中，对 www.google.com 的请求由左侧的一条线、中间带有深色部分和浅色部分的条形以及右侧的一条线表示。图 25 显示了“网络”面板的“计时”选项卡中同一请求的相应表示。以下是这两种表示方式如何相互映射：

• 左行是连接开始事件组之前的所有内容，包括在内。换句话说，它是请求发送之前的所有内容，独占。
• 条形的浅色部分是请求发送和等待 (TTFB)。
• 栏的黑色部分是内容下载。
• 右边的线本质上是等待主线程所花费的时间。这未在“计时”选项卡中表示。

TTFB 是“Time-to-First-Byte”，如果上下文不明显，则为浏览器收到第一个响应数据包之前的时间。

编辑 - 对原始问题中的图像的一些附加评论：Left Whiskers：这意味着浏览器分别在大约 1681 毫秒和 1682 毫秒时理解您的前两个请求。浏览器很忙，需要大约 18 毫秒才能真正将第一个请求发送到网络上，但第二个请求只需要 1 毫秒即可发送到网络上。

Box（浅色和深色部分） 第一个请求大约需要 6 毫秒来发送并等待服务器处理，然后才能收到第一个响应数据包，而接收整个响应只需要大约 1 毫秒。第二个请求只需要约 1 毫秒的时间来发送和处理，另外约 1 毫秒的时间来拉取所有请求。

右胡须 这里就变得更奇怪了。浏览器在脚本阶段非常繁忙（相关过滤时间块中堆积面积图顶部的黄色驼峰），以至于总体上来说，直到分别在 1748 毫秒和 1752 毫秒之前，浏览器才确认网络响应时间线。这意味着，如果主线程更快地产生结果，那么这两个结果可能会分别更快地发生约 43 毫秒和约 68 毫秒。

如果您有长时间运行的同步代码，您可能会考虑setTimeout(fn, 0)或setImmediate(fn)放弃线程并让 I/O 内容完成。setImmediate实际上不受浏览器支持，但通常是填充的，因此您可能可以使用它。