Chrome DevTools 网络性能分析中的胡须代表什么？
What do the whiskers represent in the Chrome DevTools network performance analysis?
我正在分析网络请求的时间，我发现与网络选项卡相比，性能选项卡提供了更多有关时间的信息。
在下面的屏幕截图中，请求显示有长胡须，我想了解它们是什么以及如果可能的话减少它们的常用方法。
Google 将其称为 "line-bar representation" 而不是 "box and whisker plot"，但这就是您要查找的内容：
- 左边的胡须是 Request Sent 之前的所有内容，不包括 Request Sent 本身。
- 正确的胡须是在主线程中等待的时间，因为 @wOxxOm
，它是响应通过网络返回的时间，但浏览器正忙于做其他事情，您的代码还没有收到了。
盒子本身也分为浅色和深色部分，详情如下。
根据 developer reference，这是相关位：
Figure 24. The line-bar representation of the www.google.com request
In Figure 24, the request for www.google.com is represented by a line on the left, a bar in the middle with a dark portion and a light portion, and a line on the right. Figure 25 shows the corresponding representation of the same request in the Timing tab of the Network panel. Here's how these two representations map to each other:
- The left line is everything up to the Connection Start group of events, inclusive. In other words, it's everything before Request Sent, exclusive.
- The light portion of the bar is Request Sent and Waiting (TTFB).
- The dark portion of the bar is Content Download.
- The right line is essentially time spent waiting for the main thread. This is not represented in the Timing tab.
TTFB 是 "Time-to-First-Byte"，以防上下文不明显，浏览器收到第一个响应数据包的时间。
编辑 - 对原始问题中图片的一些附加评论：
左胡须：
这意味着浏览器分别在大约 1681 毫秒和 1682 毫秒时理解您的前两个请求。浏览器很忙，需要大约 18 毫秒才能将第一个请求发送到网络，但第二个请求只需要 1 毫秒就可以发送到网络。
盒子（明暗部分）
第一个请求在收到第一个响应数据包之前大约需要 6ms 发送和等待服务器处理，而接收整个响应只需要 ~1ms。第二个请求仅需 ~1ms 即可发送和处理，另外 ~1ms 即可将其全部拉下。
右边的胡须
这就是它变得更奇怪的地方。浏览器在脚本阶段非常忙（相关过滤时间块中堆叠面积图顶部的黄色驼峰），总体上它似乎分别在 1748 毫秒和 1752 毫秒之前才确认网络响应时间线。这意味着如果主线程更快地产生结果，那么这两个结果应该发生的任何事情都可能分别提前 ~43ms 和 ~68ms 发生。
如果您有很长的 运行 同步代码，您可以考虑 setTimeout(fn, 0) 或 setImmediate(fn) 来让出线程并让 I/O 东西完成。 setImmediate 实际上不支持浏览器，但经常被 polyfilled，所以你可以使用它。
我正在分析网络请求的时间，我发现与网络选项卡相比，性能选项卡提供了更多有关时间的信息。
在下面的屏幕截图中，请求显示有长胡须，我想了解它们是什么以及如果可能的话减少它们的常用方法。
Google 将其称为 "line-bar representation" 而不是 "box and whisker plot"，但这就是您要查找的内容：
- 左边的胡须是 Request Sent 之前的所有内容，不包括 Request Sent 本身。
- 正确的胡须是在主线程中等待的时间，因为 @wOxxOm
盒子本身也分为浅色和深色部分，详情如下。
根据 developer reference，这是相关位：
Figure 24. The line-bar representation of the www.google.com request
In Figure 24, the request for www.google.com is represented by a line on the left, a bar in the middle with a dark portion and a light portion, and a line on the right. Figure 25 shows the corresponding representation of the same request in the Timing tab of the Network panel. Here's how these two representations map to each other:
- The left line is everything up to the Connection Start group of events, inclusive. In other words, it's everything before Request Sent, exclusive.
- The light portion of the bar is Request Sent and Waiting (TTFB).
- The dark portion of the bar is Content Download.
- The right line is essentially time spent waiting for the main thread. This is not represented in the Timing tab.
TTFB 是 "Time-to-First-Byte"，以防上下文不明显，浏览器收到第一个响应数据包的时间。
编辑 - 对原始问题中图片的一些附加评论： 左胡须： 这意味着浏览器分别在大约 1681 毫秒和 1682 毫秒时理解您的前两个请求。浏览器很忙，需要大约 18 毫秒才能将第一个请求发送到网络，但第二个请求只需要 1 毫秒就可以发送到网络。
盒子（明暗部分） 第一个请求在收到第一个响应数据包之前大约需要 6ms 发送和等待服务器处理，而接收整个响应只需要 ~1ms。第二个请求仅需 ~1ms 即可发送和处理，另外 ~1ms 即可将其全部拉下。
右边的胡须 这就是它变得更奇怪的地方。浏览器在脚本阶段非常忙（相关过滤时间块中堆叠面积图顶部的黄色驼峰），总体上它似乎分别在 1748 毫秒和 1752 毫秒之前才确认网络响应时间线。这意味着如果主线程更快地产生结果，那么这两个结果应该发生的任何事情都可能分别提前 ~43ms 和 ~68ms 发生。
如果您有很长的 运行 同步代码，您可以考虑 setTimeout(fn, 0) 或 setImmediate(fn) 来让出线程并让 I/O 东西完成。 setImmediate 实际上不支持浏览器，但经常被 polyfilled，所以你可以使用它。