Google插件Performance工具进行性能分析

环境准备

【匿名模式】：匿名模式可以保证Chrome在一个相对干净的环境下运行。我们安装了许多chrome插件，这些插件可能会影响我们分析性能表现。使用ctrl+shift+N即可在匿名模式下开启新的chrome新标签页。

使用performance工具进行性能分析的数据准备

进入开发者工具后，点击performance

点击录制按钮，开始录制，在对应页面进行有关操作，然后点击停止，停止录制、处理数据并生成性能报告。

分析报告

看上上述性能表现报告时，已备好性能分析的数据。那么久可以用来分析页面的性能，从而找到性能瓶颈

分析每一秒的帧

FPS（frames per second）是用来分析动画的一个主要性能指标。能保持在60的FPS的话，那么用户体验就是不错的。观察FPS图表，如果你发现了一个红色的长条，那么就说明这些帧存在严重问题，有可能导致非常差的用户体验。一般来说，绿色的长条越高，说明FPS越高，用户体验越好。

就在FPS图表下方，你会看到CPU图表。在CPU图表中的各种颜色与Summary面板里的颜色是相互对应的，Summary面板就在Performance面板的下方。CPU图表中的各种颜色代表着在这个时间段内，CPU在各种处理上所花费的时间。如果你看到了某个处理占用了大量的时间，那么这可能就是一个可以找到性能瓶颈的线索。
把鼠标移动到FPS，CPU或者NET图表之上，DevToos就会展示这个时间点界面的截图。左右移动鼠标，可以重发当时的屏幕录像。这被称为scrubbing, 他可以用来分析动画的各个细节。
在Frames图表中，把鼠标移动到绿色条状图上，Devtools会展示这个帧的FPS。每个帧可能都在60以下，都没有达到60的标准，也可能高于60，这些是结合FPS表来进行分析查看的，重点关注FPS表中较低处。

在我们实际场景中，我们也需要结合小工具进行性能分析
小功能：显示实时FPS面板

按下 Command+Shift+P（Mac）或者 Ctrl+Shift+P(Windows, Linux) 打开命令菜单
输入Rendering，点选Show Rendering
在Rendering面板里，激活FPS Meter。FPS实时面板就出现在页面的左上方。

关闭FPS Meter只要按下Esc就可以了。

定位瓶颈

注意Summary面板，你会发现CPU花费了大量的时间在Idle和Scripting上。因为提高性能就是一门做减法的艺术，你的目标就是减少Idle和Scripting的时间。

展开Main图表，Devtools展示了主线程运行状况。X轴代表着时间。每个长条代表着一个event。长条越长就代表这个event花费的时间越长。Y轴代表了调用栈（call stack）。在栈里，上面的event调用了下面的event。

在性能报告中，有很多的数据。可以通过双击，拖动等等动作来放大缩小报告范围，从各种时间段来观察分析报告。
在事件长条的右上角出，如果出现了红色小三角，说明这个事件是存在问题的，需要特别注意。
点击这个带有红色小三角的的事件。在Summary面板会看到详细信息。注意reveal这个链接，双击它会让高亮触发这个事件的event。如果点击了ui.dll.js:45这个链接，就会跳转到对应的代码处。

Call Tree，可以通过调用树来查看各个文件调用运行的时间及占比。