“性能”面板的“网络”部分中每个请求的行和条的含义是什么？

Question

在Chrome DevTools（Chrome 59）的效果面板的网络部分中，每个请求都有一个行和条。例如，请在下面的屏幕截图中查看ados.js。

以下是ados.js的时间细分。

这两个表示如何相互映射？

Answer 1

• 左边的行是Initial connection（含）的所有内容。
• 条形图的亮部分为Request sent和Waiting (TTFB)。
• 栏的黑暗部分是Content Download。
• 正确的行基本上是等待主线程花费的时间。这未在时间标签中显示。

来源：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#network

P.S。现在有一个功能请求，用于在“性能”面板的“网络”部分中将鼠标悬停在请求上时显示时间细分：https://crbug.com/703335