FPS

看看FPS图表。当你在FPS上方看到红色条时，这意味着帧率降得太低，可能会影响用户体验。一般来说，绿色条越高，FPS就越高。

CPU

在 FPS 图表下面你可以看到 CPU 图表。CPU 图表中的颜色对应于 Performance 面板底部的 Summary 选项卡中的颜色。

事实上，CPU 图表是充分的颜色意味着 CPU 是最大限度的在记录。每当你看到 CPU 长时间超负荷运行，这就意味着你需要找到减少工作量的方法。

Frames帧

在帧部分，将鼠标悬停在一个绿色方块上。DevTools会显示特定帧的FPS。每帧可能远低于60帧/秒的目标。

Main

展开Main部分。DevTools 会显示主线程上随时间变化的活动火焰图表。X 轴代表的是随着时间的推移而产生的记录。每个条都代表一个事件。越宽意味着活动时间越长。Y 轴表示调用堆栈。当你看到事件层层叠加，这意味着上层事件导致了下层事件。

可以通过放大、点击、缩放查看每个具体的事件。

注意动画帧触发事件右上方的红色三角形。当您看到红色三角形时，这是一个警告，表示可能有与此事件相关的问题。

点击动画帧触发事件。Summary选项卡现在显示关于该事件的信息。注意显示链接。点击它会使DevTools突出显示触发动画帧触发事件的事件。还要注意app.js:94链接。单击该按钮将跳转到源代码中的相关行。

这段代码的问题是，在每个动画帧中，它会改变每个方块的样式，然后查询每个方块在页面上的位置。因为样式改变了，浏览器不知道每个方块的位置是否改变了，所以它必须重新布局方块来计算它的位置。