全新Chrome Devtool Performance使用指南

运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevToos Performance功能去分析运行时性能表现。在RAIL性能评估模型下，你能够在这篇指南中能够学到怎么去用这个performance功能去分析Response, Animation, 以及 Idle 这三个性能指标。

让咱们开始吧

在这篇指南中，咱们会用Performance工具去分析一个现有的在线DEMO，而后教会你怎么去分析，从而找到性能瓶颈。

1. 打开Chrome的匿名模式。匿名模式能够保证Chrome在一个相对干净的环境下运行。好比说，你安装了许多chrome插件，这些插件可能会影响咱们分析性能表现。
2. 在匿名模式下打开右边这个连接，DEMO，这个网页就是咱们要用来分析的DEMO。这个页面里都是不少上下移动的蓝色小方块。
3. 按下Command+Opiton+I（Mac）或者Control+shift+I (Windows, Linux) 来打开Devtools

 

 

模拟移动设备的CPU

移动设备的CPU通常比台式机和笔记本弱不少。当你想分析页面的时候，能够用CPU控制器（CPU Throttling）来模拟移动端设备CPU。

1. 在DevTools中，点击 Performance 的 tab。
2. 确保 Screenshots checkbox 被选中
3. 点击 Capture Settings（⚙️）按钮，DevTools会展现不少设置，来模拟各类情况
4. 对于模拟CPU，选择2x slowdown，因而Devtools就开始模拟两倍低俗CPU

 

 

设置DEMO

为了使得这个DEMO有相对统一的运行表现（不一样的读者，机器的性能千差万别）。这个DEMO提供了自定义功能，用来确保这个DEMO的统一表现。

1. 一直点击 Add 10 这个按钮直到你能很明显看到蓝色小方块移动变慢，在性能比较好的机器上，大概要点击20次左右。
2. 点击 Optimize按钮，你会发现蓝色小方块会变的很快并且动画变得平滑。
3. 点击 un-optimize 按钮，蓝色小方块又会变成以前的模样。

记录运行时性能表现

在以前的DEMO中，当你运行优化模式的时候，蓝色小方块移动地很是快。为何呢？明明两个模式都是移动了一样数量的小方块并且移动的时间也同样。那么如今咱们在Performance界面下录制下发生的一切，而且学习如何分析这个记录，从而找到非优化模式下的性能瓶颈。

1. 在DevTools中，点击 Record 。这时候Devtools就开始录制各类性能指标

 

 

1. 等待几分钟
2. 点击Stop按钮，Devtools中止录制，处理数据，而后显示性能报告

 

 

wow，看起来有很是多的数据，别惧怕，咱们一个一个来介绍

分析报告

一旦你获得了页面的性能表现报告，那么就能够用它来分析页面的性能，从而找到性能瓶颈。

分析每一秒的帧

FPS（frames per second）是用来分析动画的一个主要性能指标。能保持在60的FPS的话，那么用户体验就是不错的。

1. 观察FPS图表，若是你发现了一个红色的长条，那么就说明这些帧存在严重问题，有可能致使很是差的用户体验。通常来讲，绿色的长条越高，说明FPS越高，用户体验越好。

 

 

1. 就在FPS图表下方，你会看到CPU图表。在CPU图表中的各类颜色与Summary面板里的颜色是相互对应的，Summary面板就在Performance面板的下方。CPU图表中的各类颜色表明着在这个时间段内，CPU在各类处理上所花费的时间。若是你看到了某个处理占用了大量的时间，那么这可能就是一个能够找到性能瓶颈的线索。

 

 

1. 把鼠标移动到FPS，CPU或者NET图表之上，DevToos就会展现这个时间点界面的截图。左右移动鼠标，能够重发当时的屏幕录像。这被称为scrubbing, 他能够用来分析动画的各个细节。

 

 

1. 在Frames图表中，把鼠标移动到绿色条状图上，Devtools会展现这个帧的FPS。每一个帧可能都在60如下，都没有达到60的标准。

 

 

固然这个对于DEMO，能够至关容易观察到性能的问题。可是在现实使用场景下，就不是那么容易观察到了。因此要把经常使用这些工具来分析页面。

小功能：显示实时FPS面板

另一个好用的小工具就是实时FPS面板，它能够实时展现页面的FPS指标

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

 

 

1. 关闭FPS Meter只要按下Escape就能够了。这篇指南里暂时用不上这个功能。

定位瓶颈

如今已经肯定到这个页面的动画性能表现不太好，那么下一步就是找到为何

1. 注意Summary面板，你会发现CPU花费了大量的时间在rendering上。由于提升性能就是一门作减法的艺术，你的目标就是减小rendering的时间

 

 

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

 

 

1. 在性能报告中，有不少的数据。能够经过双击，拖动等等动做来放大缩小报告范围，从各类时间段来观察分析报告。

 

 

1. 在事件长条的右上角出，若是出现了红色小三角，说明这个事件是存在问题的，须要特别注意。
2. 双击这个带有红色小三角的的事件。在Summary面板会看到详细信息。注意reveal这个连接，双击它会让高亮触发这个事件的event。若是点击了app.js:94这个连接，就会跳转到对应的代码处。

 

 

1. 在app.update这个事件的长条下方，有不少被触发的紫色长条。若是放大这些事件长条，你会看到它们每一个都带有红色小三角。点击其中一个紫色事件长条，Devtools在Summary面板里展现了更多关于这个事件的信息。确实，这里有不少reflow的警告。
2. 在summary面板里点击app.js:70连接，Devtools会跳转到须要优化的代码处

 

 

OK！Devtools里面还有不少不少指标须要你去探索，可是，对于怎么用Devtools去分析网页的运行时性能表现，你如今已经有了一个基本的概念。

 

译者博客：NIC's UTOPIA