google-chrome - Chrome DevTools 网络性能分析中的 mustache 代表什么？

Question

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

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

Answer 1

谷歌称其为“线条表示”而不是“盒须图”，但这是您要查找的内容:

左边的 mustache 是请求发送之前的所有内容，不包括请求发送本身。

正确的 mustache 是在主线程中等待的时间，如 @wOxxOm commented above ，是时候通过网络返回响应了，但是浏览器忙于做其他事情，您的代码还没有收到它。

盒子本身也分为明暗部分，详情如下。

每 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”，以防上下文不明显，即浏览器收到第一个响应数据包之前的时间。

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

盒子(亮部和暗部)
第一个请求大约需要 6ms 发送并在收到第一个响应包之前等待服务器处理，而接收整个响应只需要大约 1ms。第二个请求只需要大约 1 毫秒就可以发送和处理，另外还有大约 1 毫秒来拉下所有请求。

右须
这就是它变得更奇怪的地方。浏览器在脚本阶段非常忙碌(相关过滤时间块中堆积面积图顶部的黄色驼峰)，它似乎直到分别在 1748 毫秒和 1752 毫秒后才确认网络响应，在总体上时间线。这意味着如果主线程早点让步，那么这两个结果应该发生的任何事情都可能分别提前约 43 毫秒和约 68 毫秒发生。

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