Chrome DevTools 时间轴：新图表

Chrome DevTools Timeline: New charts

在当前 Chrome 版本 (46) 中，DevTools Timeline 包含一堆新图表。大多数图表的含义对我来说并不明显。不幸的是，我也找不到关于它们的任何文档。谁能解释一下这些图表的含义？

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

从上到下：

  • yellow/green 刻度输入 activity，例如鼠标 moves/click，按键。每个都有自己的颜色。顺便说一句，您必须启用 Chrome DevTools 实验才能看到此栏。
  • 红色条纹条是页面响应指示器。如果您在某个时候遇到特定问题，它会显示一个红色条。检测到的问题包括长帧、过度或强制布局等。
  • 绿色图表是当前帧率。越高——越好。最大为 60fps。
  • 下一个栏是 CPU 利用率。完整的条形高度表示 100% CPU 忙碌。颜色对应 activity 的类型：黄色是 JavaScript，紫色是样式重新计算或页面布局，绿色是 rendering/painting，蓝色是 html 解析或阻止网络交互。
  • CPU 下面的细条纹是当前正在运行的网络请求。颜色表示内容类型：蓝色是 html，绿色是媒体（图像、字体等），紫色是 css，黄色是 JavaScript，灰色是所有其他类型。