Chrome DevTools时间轴：新图表

Question

在当前的Chrome版本（46）中，DevTools时间轴包含一堆新图表。大多数图表的含义对我来说并不明显。不幸的是，我也找不到任何关于它们的文件。有人可以解释这些图表的含义吗？

Answer 1

这是Chrome DevTools时间轴面板上的概述栏。

从上到下：

黄色/绿色蜱是输入活动，例如鼠标移动/点击，按键。每个都有自己的颜色。顺便说一下，您必须启用Chrome DevTools实验才能看到此栏。

红色条纹栏是页面响应指示器。如果您在某个时刻遇到特定问题，则会显示红色条。检测到的问题包括长帧，过度或强制布局等。

绿色图表是当前帧速率。越高越好。最大值是60fps。

下一个栏是CPU利用率。完整的条形高度意味着100％CPU正忙。颜色对应于活动的类型：黄色是JavaScript，紫色是样式recalc或页面布局，绿色是渲染/绘画，蓝色是html解析或阻止网络交互。

CPU下方的细条纹是当前正在运行的网络请求。颜色描述内容类型：蓝色是html，绿色是媒体（图像，字体等），紫色是css，黄色是JavaScript，灰色是所有其他。