google-chrome - Chrome DevTools 网络性能分析中的胡须代表什么？
问题描述
我正在分析网络请求的时间，我发现与网络选项卡相比，性能选项卡提供了有关时间的更多信息。
在下面的屏幕截图中，请求以长须显示，我想了解它们是什么以及如果可能的话减少它们的常用方法。
解决方案
谷歌将其称为“线形图”而不是“盒须图”，但您正在寻找以下内容：
- 左边的须是 Request Sent 之前的所有内容，不包括 Request Sent 本身。
- 正确的胡须是在主线程中等待的时间，正如上面@wOxxOm 评论的那样，是响应通过网络返回的时间，但是浏览器正忙于做其他事情，以至于您的代码还没有收到它。
盒子本身也分为明暗部分，详情如下。
根据开发人员参考，这是相关位：
图 24. www.google.com 请求的线条表示
在图 24 中，对 www.google.com 的请求由左侧的一条线、中间有深色部分和浅色部分的条形以及右侧的一条线表示。图 25 在 Network 面板的 Timing 选项卡中显示了相同请求的相应表示。以下是这两种表示如何相互映射：
- 左行是连接开始事件组的所有内容，包括在内。换句话说，它是 Request Sent 之前的所有内容，排他性的。
- 条形图的浅色部分是请求发送和等待 (TTFB)。
- 该栏的深色部分是内容下载。
- 右边的行本质上是等待主线程所花费的时间。这未在 Timing 选项卡中表示。
TTFB 是“Time-to-First-Byte”，如果上下文不明显的话，就是浏览器收到第一个响应数据包的时间。
编辑-原始问题中对图像的一些附加评论：Left Whiskers：这意味着浏览器分别在大约 1681 毫秒和 1682 毫秒时理解您的前两个请求。浏览器很忙，需要大约 18 毫秒才能真正将第一个请求放到网络上，但第二个请求只需要 1 毫秒就可以放到网络上。
Box (Light and Dark Partions) 第一个请求大约需要 6ms 发送并等待服务器处理才能收到第一个响应数据包，而接收整个响应只需要 ~1ms。第二个请求只需约 1 毫秒即可发送和处理，另外约 1 毫秒即可完成所有请求。
Right Whisker 这是它变得更奇怪的地方。浏览器在脚本阶段非常忙（相关过滤时间块中堆积面积图顶部的黄色驼峰），以至于它似乎分别直到 1748 毫秒和 1752 毫秒才确认网络响应，总体上时间线。这意味着如果主线程更快地产生，那么这两个结果应该发生的任何事情都可能会分别提前约 43 毫秒和约 68 毫秒发生。
如果您有长时间运行的同步代码，您可能会考虑让出线程setTimeout(fn, 0)并setImmediate(fn)让 I/O 工作完成。setImmediate实际上不受浏览器支持，但通常是 polyfill，因此您可能可以使用它。