chrome devtools的性能监视器网络下载上的烛台图的确切含义是什么?

问题描述

我正在 chrome devtool 上观察网络性能

enter image description here

我注意到我不知道上面烛台图的确切含义。我已经搜索了指出它的文档,但我没有找到。

enter image description here

我的问题如下:

  1. 引导细线表示什么?
  2. 连续的浅色粗线表示什么?
  3. 持续的深色粗线表示什么?
  4. 末尾的细线表示什么?

解决方法

您可以在此处找到该文档:https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#network

  • 左行是连接开始事件组之前的所有内容,包括在内。换句话说,它是请求发送之前的所有内容,独占。
  • 该条的浅色部分是请求发送和等待 (TTFB)。
  • 栏的深色部分是内容下载。
  • 正确的一行本质上是等待主线程所花费的时间。这在“计时”选项卡中没有体现。