在Chrome时间线上，不同颜色的颜色意味着什么？

Question

我找不到一个很好的传说，如何阅读Chrome性能时间表。

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

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

​

​

我曾经认为，它们代表了解析/执行资产所花费的时间与通过网络传输资产所花费的时间，但这似乎不正确，因为上面照片中的长期资产包含以下时间信息：

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

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

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

Answer 1

弄明白了。

这些阴影对应的是时间是由文件"self“引起的，还是由”子“文件造成的：

​

​

我可能正在讨论这个解释，但“Self”指的是加载/执行该特定文件所需的时间，“子文件”引用父文件启动的任何附加文件，以及他们加载的时间。

所以这是有意义的，在我最初从推特截图中，“项目-项目”文件是我们代码库中的文件，异步加载其他JS模块，所以它应该有一个巨大的暗黄色部分，因为它是启动所有这些文件请求的文件。