Google Chrome时间轴

Question

我正在录制我目前正在工作的网站的表现。 当我检查时间轴时。有这些不同的颜色显示（我的猜测）fps，CPU，内存。但我不知道哪个是哪个。

任何人都可以解释这些不同颜色的含义吗？我已经搜索过，但是我看不到任何具有此布局的时间轴解释。

Answer 1

最上面的条带（红色条带）是响应性。如果它是红色的，那么你在那个地方遇到了问题，例如非常长的框架导致凹陷，过度的样式重新计算等。使用火焰图放大此区域以查找详细信息。

下一个（绿色）是帧率。越高越好。最大值是60fps。

下一个是CPU利用率，其颜色取决于CPU当前正忙于处理的活动类型。例如。很多黄色表示它运行JS代码，紫色表示CSS样式重新计算或布局等。

带有小条的最后一个条带是网络活动。它显示当前是否有网络请求在飞行中。