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

Question

我找不到关于如何阅读 Chrome Devtools 性能时间表的好图例。

我知道不同的颜色指的是正在进行的工作类型（scripting、rendering 等）。

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

我曾经认为它们代表了 parsing/executing 一项资产花费的时间与它通过网络传输它所花费的时间，但这似乎不是真的，因为上图中的多头资产具有以下时间信息：

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

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

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

Answer 1

想通了。

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

我可能在扼杀这个解释，但“Self”是指该特定文件到 load/execute 所需的时间长度，“children”是指由parent，以及他们加载的时间。

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