前言欲善其事，必先利其器。了解了性能指标后，性能优化的目标就已经明确了。接下来，我们使用一些性能测量工具来明确网页离优化目标还有多远。一个好的工具可以让你事半功倍。接下来我会用3篇文章介绍3款主流的测量工具：ChromeDevToolsPerformance主要用于日常开发中分析运行时性能。Lighthouse用于生成网页的性能评估报告。WebPageTest用于网站整体质量评估和一站式性能评估。有了这三个工具，我们就可以从多个维度对网站性能进行综合评估。PerformanceMeasurementTool-Performance运行时性能（runtimeperformance）是指你的页面在浏览器中运行时的性能，而不是页面加载时的性能。本文将告诉您如何使用性能工具来分析运行时性能。Performance工具的原名是TimeLine，也叫时序图。在Chrome58中，DevToolsTimeline更名为Performance。一、基本配置1.1启用隐身模式隐身模式可以保证Chrome在一个相对干净的环境中运行。比如安装了很多chrome插件，可能会影响我们的分析性能。点击浏览器右上角-打开一个新的隐身窗口1.2使用devTools工具1.输入要测试的网址，这里是谷歌官方给的一个测试demo地址：https://googlechrome.github.io/devtools-样本/jank/2。按Command+Opiton+I（Mac）或Control+shift+I（Windows、Linux）打开Devtools，点击Performace，可以看到如下界面：1.3设置移动设备CPU移动设备CPU一般比台式机和笔记本弱很多.当你要分析页面时，可以使用CPU控制器（CPUThrottling）来模拟移动设备的CPU。在DevTools中，单击性能选项卡。确保选中Screenshots复选框，然后点击CaptureSettings按钮，DevTools会显示很多设置来模拟各种情况对于模拟CPU，选择4xslowdown，然后Devtools会开始模拟4xlow-speedCPU1.4SetDEMOtomake本DEMO运行性能比较统一（不同读者，机器性能差异很大）。本DEMO提供了自定义功能，以保证本DEMO的性能统一。单击添加10按钮，直到您可以清楚地看到蓝色方块缓慢移动。在性能较好的机器上，大约需要点击20次左右。点击优化按钮，你会注意到蓝色方块会快速变化，动画也会变得流畅。点击取消优化按钮，蓝色小方块就会变成原来的样子。1.5记录运行时性能在之前的DEMO中，当你运行优化模式时，蓝色方块移动得非常快。为什么？显然，两种模式移动的小方块数量相同，移动时间相同。所以现在我们记录下Performance接口中发生的一切，并学习如何分析这个记录来找到非优化模式下的性能瓶颈。在DevTools中，单击记录。此时Devtools会开始记录各种性能指标，等待8秒左右点击Stop按钮，Devtools会停止记录，处理数据，最后显示性能报告2.分析报告一旦得到性能报告页面，你可以用它来分析页面的性能，找出性能瓶颈。2.1FPS图FPS（framespersecond）是用来分析动画的主要性能指标。如果FPS能保持在60，那么用户体验还是不错的。查看FPS图表，如果您看到红色条，则这些帧存在严重问题，这可能会导致非常差的用户体验。一般来说，绿色条越高，FPS越高，用户体验越好。2.2CPU图观察FPS图下方的CPU图。图中各种颜色代表了这段时间CPU在各个进程上花费的时间。如果您看到某个进程占用了大量时间，则可能是性能瓶颈的线索。CPU图表中的各种颜色对应于摘要面板中的颜色。如下图：2.3截图将鼠标移到FPS、CPU或NET图表上，DevToos会及时显示该时间点的界面截图。左右移动鼠标重新发送当时的录屏。这称为擦洗，可用于分析动画的各种细节。2.4Frames在Frames图表中，将鼠标移到绿色柱状图上，Devtools会显示该帧的FPS。可以看出每帧可能超过60ms，说明动画对于用户来说已经很卡了。另一个好用的小工具是实时FPS面板，可以实时显示页面的FPS指标：按Escape键打开底部的控制面板，点击左侧的“三点”按钮，选择Rendering，然后在Rendering面板中打开Rendering面板，激活FrameRenderingStats。FPS实时面板出现在页面的右上角。当然，对于DEMO来说，性能问题是很容易观察到的。但是在真实的使用场景中，并不是那么容易观察到的。所以经常使用这些工具来分析页面是很有必要的。3.定位瓶颈既然确定了这个页面的动画性能不佳，那么接下来就是找出原因1.关注Summary面板，你会发现CPU在渲染上花费了大量的时间.因为提高性能是一门减法的艺术，你的目标是减少渲染时间2.展开Main图表，Devtools显示了主线程的运行状态。x轴表示时间。每个条代表一个事件。条形图越长，事件持续的时间越长。Y轴表示调用堆栈。在堆栈中，上面的事件调用下面的事件。3、业绩报告中，数据较多。您可以通过双击、拖动等方式放大和缩小报告范围，观察各个时间段的分析报告。4、在事件栏的右上角，如果有一个红色的小三角，说明这个事件有问题，需要特别注意。5.双击红色小三角，在Summary面板中可以看到详细的信息。注意显示链接，双击它会突出显示触发此事件的事件。如果你点击app.js:94链接，你将跳转到相应的代码。6、app.update事件的bar下面，有很多紫色的bar被触发。如果放大这些紫色事件条，您会看到它们每个都有一个红色小三角形。单击其中一个紫色事件栏，Devtools会在Summary面板中显示有关此事件的更多信息。事实上，这里有很多回流注意事项。7.点击摘要面板中的app.js:71链接，Devtools会跳转到需要优化的代码。OK，我们找到性能瓶颈了！除了Performance面板，我们还可以通过Network面板Conditions分析网络资源的负载情况，通过Throtting、Audit（LightHouse）生产评估报告等调整网络吞吐量。最后，Devtools中还有很多很多的指标，你需要探索。但是，您现在已经对如何使用Devtools分析网页的运行时性能有了基本的概念。
