Chrome 开发者工具 —— Performance 快速入门

原文连接： https://developers.google.com...
若是你想学会如何使用 Chrome 的 Performance 来分析页面性能，而你又没法使用 Google，也许这篇文章能帮到你。
这篇文章将教会你如何使用 Performance 面板来分析浏览器运行时的性能。
github 地址： https://github.com/hewq/blog/...
相关文章： https://github.com/hewq/blog/...

开始

在本教程中，你将在 Chrome 浏览器的开发者工具中，使用 Performance 面板查找页面性能瓶颈。

1. 打开 Chrome 的无痕模式。无痕模式可以确保浏览器在没有其余干扰的环境中运行。好比，若是你的 Chrome 安装了不少插件，这些插件可能会干扰到性能的评估。
2. 在无痕窗口中打开 https://hewq.github.io/apps/a...，这是一个用来分析性能的 Demo。
3. 按下Command+Option+I(Mac)或者Control+Shift+I(Windows, Linux)打开开发者工具。

模拟手机 CPU

手机的 CPU 性能比起电脑的要差一些，因此当你分析页面的时候能够经过限制 CPU 来模拟页面在手机上的表现。

1. 在开发者工具中，点击 Performance。
2. 勾选 Screenshots 复选框。
3. 点击右边的 Capture Settings

，将会看到有关性能指标的设置。

1. 在 CPU 那一栏，选择 2x slowdown （新版本的 Chrome 可能只有 4x slowdown 和 6x slowdown）。限制 CPU 比正常状况下慢 2 倍。

设置 Demo

很难作到打开该页面的全部用户都能有同样的性能演示，因此你能够手动设置，不管使用哪一种设置，确保你的体验和本教程中看到的屏幕截图和说明相近。

1. 持续点击 Add 10，直到蓝色方块的移动明显变慢。
2. 点击 Optimize，蓝色方块将移动得更快更顺滑。
3. 点击 Un-Optimize，蓝色方块的移动又会变慢变卡。

记录运行时的性能

当你开启优化（Optimize）的时候，蓝色的方块比没有开启优化（Un-Optimize）时移动更快。为何会这样？两个版本都是在相同的时间内将方块移动到相同位置。在 Performance 中进行记录，以了解如何检测未优化版本的性能瓶颈。

1. 点击 Record

。开发者工具将会记录页面运行时的性能指标。

1. 等待几秒钟。
2. 点击 Stop。开发者工具中止记录，处理数据，而后显示结果。

是否是看到了不少眼花缭乱的数据无从下手，不用担忧，接下来你就能学会如何分析这些数据。

结果分析

记录了页面性能以后，就能够衡量页面的性能有多差，并找出缘由。

分析 frames per second（FPS）

衡量动画的主要指标就是 frames per second（FPS）。当动画以 60 FPS 运行的时候，用户就会以为很顺滑。

1. 查看 FPS 图表。当你看到 FPS 上面的红色条时，就表示帧速率降低得很低，可能会影响用户的体验。通常来讲，绿色条越高，FPS 越高。
2. 在 FPS 图表下面有个 CPU 图表。CPU 图表中的颜色和下方 Summary 的颜色时相对应的。CPU 图表充满颜色意味着在记录过程当中，CPU 的使用已经达到最大值。当你看到 CPU 长时间处于满负荷状态时，你应该想办法下降 CPU 的使用。
3. 鼠标放到 FPS、CPU 或者 NET 图表上，开发者工具将显示出该时间点的页面截图。将鼠标从左到右移动，就能够从新看到记录过程当中页面的渲染状况。这对于手动分析动画的进度颇有用。
4. 在 Frames 部分，将鼠标放到任意一个绿色方块上面，你就能看到指定帧的 FPS。每一帧均可能远低于 60 FPS。

固然，在这个 Demo 中，页面性能很差是很明显的。可是在实际状况下，可能并非那么容易分辨，因此有这些工具进行测量就很是方便了。

打开 FPS 显示器

另外一个方便的工具就是 FPS 显示器，它能够在页面运行时显示 FPS 的实时数据。

1. 按下Command+Shift+P（Mac）或者Control+Shift+P（Windows, Linux）打开命令菜单。
2. 在命令菜单中输入Rendering，选择 Show Rendering。
3. 在 Rendering 选项下，选中 FPS Meter（或者 Frame Rendering Stats）, FPS 的实时数据就会显示出来。

找到性能瓶颈

如今，你已经测量并验证了动画效果不佳，接下来要回答的问题就是：为何？

1. 留意 Summary 选项，若是没有选择任何事件，这里就会显示活动的细分。这个页面在渲染上花费了大部分的时间，由于性能是一门减小工做量的艺术，因此你的目标是减小页面渲染所花费的时间
2. 展开 Main 部分。你将看到主线程随时间变化的火焰图。x 轴表示随时间变化的记录，每一条表明一个事件，宽度越长表示花费的时间越多。y 轴表示的是调用栈。当你看到事件相互叠加时，表明上面的事件触发了下面的事件。
3. 经过单击，在概述上（包含 FPS、CPU 和 NET 图表的那部分）按住并拖动鼠标来放大单个 Animation Frame Fired 事件。Main 和 Summary 部分会只显示所选部分的信息。

*缩放的另外一种方法是经过单击主要部分的背景或选择一个事件来聚焦主要部分，而后按W，A，S和D键。

1. 留意 Animation Frame Fired 右上角的三角形，这是一个警告，每当你看到这个三角形时，说明可能存在与此事件相关的问题。

*每当执行requestAnimationFrame（）回调时，都会触发 Animation Frame Fired 事件。

1. 点击 Animation Frame Fired 事件，Summary 里会显示与该事件相关的信息。留意 reveal 连接，点击该连接，能够看到触发 Animation Frame Fired 的事件。同时留意 app.js:94（app.js:81） 这个连接，点击会跳到源代码中的相关行。

*选择事件后，使用箭头键选择它旁边的事件。

1. 在 app.update 下面，有一堆紫色的事件，若是它们足够宽，看上去好像每个上面都有一个红色三角形。点击紫色的 Layout 事件，Summary 中显示了更多关于该事件的信息。实际上，是一个关于强制回流（布局）的警告。
2. 在 Summary 中点击 Layout Forced 下的 app.js:70（app.js:57） 定位到强制回流的代码上。

*这个代码的问题是，在每一个动画帧中，它会更改每一个方块的样式，而后查询页面上每一个方块的位置。由于样式发生了变化，浏览器不知道每一个正方形的位置是否发生了变化，所以必须从新布局正方形以计算其位置。

须要了解的内容有不少，可是如今你已经有了分析运行时性能的基本流程的基础。加油！

分析优化版本

使用刚刚学到的工具和流程，点击页面上 Optimize 启用优化后的代码，获取另外一个性能记录，而后分析结果。从提升帧率到 Main 火焰图中事件的减小，你能够看到，优化后的页面工做量大大减小，从而提升了性能。

*即便这个“优化”版本也不是那么好，由于它仍然操纵每一个正方形的 top 属性。更好的方法是使用只影响合成层的属性。