Chrome Devtools Timeline 中的资产的不同深浅颜色意味着什么？

我找不到关于如何阅读 Chrome Devtools Performance Timeline 的好图例。

我知道不同的颜色表示正在完成的工作类型（scripting、rendering 等）。

但我不明白的是，这些颜色的不同阴影在时间线上意味着什么？

我曾经认为它们代表了解析/执行资产所花费的时间与通过网络传输资产所花费的时间，但这似乎不是真的，因为上面的照片有这个时间信息：

Duration    552.30 ms (509.58 ms network transfer + 42.72 ms resource loading)

资产的深黄色部分比浅黄色部分大，但不是 10 倍。

它是否代表执行了多少资产？这是没有意义的，因为相同的颜色阴影发生在 HTML 文档本身......

想通了。

那些阴影对应于时间是由文件“self”还是文件“children”引起的：

我可能会扼杀这个解释，但“自身”指的是加载/执行该特定文件所需的时间，“子项”指的是由父项启动的任何其他文件，以及它们花费的时间加载中。

所以这是有道理的，在我的原始推文截图中，“project-project”文件是我们代码库中异步加载其他 JS 模块的文件，所以它会有一个巨大的深黄色部分是有道理的，因为它是发起对所有这些文件的请求的人。