Google Chrome 时间线

Question

我正在记录我当前工作的网站的性能。 当我查看时间轴时。这些不同的颜色显示（我的猜测）fps、CPU、内存。但是我不知道哪个是哪个。

谁能解释一下这些不同的颜色是什么意思？我已经搜索过，但我没有看到任何具有此布局的时间轴解释。

Answer 1

最上面的条带（红色条带）是响应能力。如果它是红色的，那说明那个地方有问题，例如非常长的帧导致卡顿、过多的样式重新计算等。使用火焰图放大此区域以查找详细信息。

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

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

最后一个带小条的条带是网络 activity。它显示当前是否有正在运行的网络请求。