问题描述
我找不到关于如何阅读 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 模块的文件，所以它会有一个巨大的深黄色部分是有道理的，因为它是发起对所有这些文件的请求的人。