Chrome 开发者工具的性能选项卡使用教程（译文）

前言

这篇文章Google开发者中DevTools^[1]文档Performance部分的英文译文，若有翻译不对的地方，但愿你们指出

原文：developers.google.com/web/tools/c…
做者： Kayce Basques
译者： Timwk

注：未经许可，请勿转载

正文

「注：能够查看优化网站速度以了解如何使您的页面加载速度更快。」

运行性能（Runtime performance）是页面运行（而不是加载）时的性能。 本教程将教您如何使用“Chrome DevTools”的性能选项卡(performance)来分析运行性能。 在RAIL(response, animation, idle, load)模型方面，您在本教程中学习的技能对于分析页面的响应，动画和空闲阶段颇有用。

警告：本教程基于Chrome59。若是您使用其余版本的Chrome，则DevTools的UI和功能可能会有所不一样。 检查chrome：// help，查看您正在运行的Chrome版本。

教程开始

在本次教程中，你在页面中打开 「DevTools」，并使用「Performance」 选项卡来查找页面的性能瓶颈

1. 在隐身模式中打开 「Google Chrome」。隐身模式可以使 「Chrome」 进入纯净状态，例如：若是您安装了许多浏览器扩展，这些扩展可能会干扰性能评估，得不到准确的数据；
2. 在隐身窗口中打开下面页面。这是该教程的演示页面。这个页面中显示了一群上下移动的小蓝色方块；
   googlechrome.github.io/devtools-sa…
3. 使用快捷键 「Command+Option+I」(Mac) 或 「Control+Shift+I」(Windows,Linux) 打开 DevTools ,效果以下图： ˆ 「图1」 页面在左边，DevTools在右边

注意：对于后续其余的屏幕截图，`DevTools`将做为 单独的窗口出现，以便你能更好的查看内容

模拟移动CPU

与台式电脑和笔记本相比，移动设备的CPU的性能要低不少。因此当你分析页面，通常使用CPU限制来模拟页面在移动设备上的表现；

1. 在 「Devtools」中，单击”性能“选项卡；
2. 肯定启动 「Screenshots」 复选框；
3. 单击 「Capture Setting」 。 「DevTools」 会展开跟性能分析时环境相关的设置。
4. 对于 「CPU」选项，选择 「2x slowdown」。DevTools会限制你的CPU,使其比正常时慢2倍 「图2」 CPU 节流设置，蓝色框处

注意：在测试其余页面时，若是要确保它们在低端移动设备上能够正常工做，请将CPU限制设置为20倍速度减慢。 此演示没法与20倍的减速一块儿很好地工做，所以仅将2倍的减速用于教学目的。
译者注：目前的手机cpu性能已远超以前，目前chrome中只能设置4x\6x

演示设置

由于很难建立一个使全部用户都表现一致的运行性能演示页面^[2]。接下来你须要自定义演示，以确保在你的条件下，你的体验与本教程中看到的屏幕截图和说明相对一致；

1. 单击“Add 10” 按钮，知道蓝色方块的移动速度明显比初始时慢。在性能好的计算机上，可能须要约20次的点击

2. 单击“Optimize”（优化）按钮，蓝色方块能移动得更快更稳

注意：若是你看不到优化和未优化版之间的明显差别，请尝试单击“Subtract 10”按钮几回，而后重试上面操做。若是添加过多的蓝色方块，则只会使CPU达到最大值，而不会看到两个版本的结果有太大的差别；

3. 单击 ”Un-Optimize“按钮。蓝色方块的移动速度会变慢和页面变得卡顿

记录运行性能

当您运行页面的优化版本时，蓝色方块移动得更快。 这是为何？ 两种版本都应在相同的时间内将每一个正方形移动相同的空间。 在「performance」选项卡中进行录制，能够了解如何检测未优化版本中的性能瓶颈。

1. 在 「DevTools」中，单击“Record”。 「DevTools」 捕获页面运行时的性能指标。

「图3」：页面分析

2. 等几秒钟。
3. 点击 ”Stop“ 按钮， 「DevTools」 中止记录，处理数据，而后在 「performance」选项卡上显示最终结果 「图4」：分析结果

wow, 这是数据量也太大了吧。但不用担忧，接下来你就会知道这些数据的含义的；

结果分析

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

分析每秒帧数（Frames Per Second,简称：FPS)

衡量动画性能的主要指标是每秒帧数（FPS）。 当动画以60 FPS运行时，用户看着是流畅的^[3]。

1. 查看「FPS」表，若是你在图标的上方看到红色条，则表示页面帧数很低，会影响用户的使用体验（译者：会让用户以为有卡顿出现） 「图5」：蓝框标识的是 FPS 图表

2. 在 FPS 图表下方，你会看到CPU图标。CPU图表中的颜色与「Performance」选项卡底部的「Summary」选项卡的颜色对应。CPU图表中，颜色填充的高度越高则表示使用CPU的资源越多。当你看到CPU长时间处于满负荷的状态，就须要寻找减小使用CPU的方法； ˆ

「图6」：蓝框标识CPU图标和「Summary」选项卡

3. 将鼠标悬停在FPS，CPU或NET图表上。 「DevTools」将显示该时间点的页面截图。 左右移动鼠标以显示记录。 这称为 scrubbing(译者：这里暂时没找到合适的翻译)，对于手动分析动画的播放颇有用。 「图7」：查看记录中约2000ms处页面的屏幕截图

4. 在“Frames”(帧)部分，将鼠标悬停在某个绿色的方块上，「DevTools」 会显示特定帧的FPS,帧数可能远远达不到 60 FPS 的目标；

「图8」：悬停在帧上

在这个演示上，咱们能很明显的看出页面效果很差。但在实际状况中，可能不会很明显，所以使用这些工具能很方便的进行检测。

额外：打开 FPS 仪表

另外一个方便的工具是FPS测量仪，它能够在页面运行时提供FPS的实时估算。

1. 按Command + Shift + P（Mac）或Control + Shift + P（Windows，Linux）打开“命令”菜单。
2. 在输入栏输入“Rendering”，而后选择“Show Rendering”。
3. 在 「Rendering」选项卡中，选中 「FPS Meter」, 会有一个新的悬浮层显示在视图的右上角（MAC是左上角）。

「图9」：FPS 面板

4. 取消 FPS Meter， 而后按ESC键关闭 「Rendering」选项卡，在本教程你将用不到这个面板。

寻找瓶颈

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

1. 注意 「summary」选项卡。 若是未选择任何事件，则此选项卡显示活动的分类。 该页面花费了大部分时间进行渲染。 因为提升性能是减小浏览器工做量的艺术，所以您的目标是减小花费在进行渲染工做上的时间。

「图10」：蓝色框是「Summary」选项卡

2. 展开“Main”部分。 「DevTools」 向您显示了主线程随时间变化的活动图表。 x轴表示一段时间内的记录。 每一个条形表明一个事件。 宽条表示该事件花费了更长的时间。 y轴表示调用堆栈。 当您看到事件相互叠加时，表示较高的事件调用较低的事件。

「图11」：蓝色框是“Main”块

3. 记录中有不少数据。 经过单击，按住并在“概述”上拖动鼠标来放大单个 「Animation Frame Fired」事件，该概述是包括FPS，CPU和NET图表的部分。 “Main”块和“summary”选项卡仅显示记录中所选部分的信息。 「图12」：放大单个 Animation Frame Fired事件

注意：另外一种缩放方法是经过单击"Main"块的背景或选择一个事件来聚焦观察，而后按W，A，S和D键（译者：W是放大，S是缩小，S左移，D右移）。

4. 请注意“Animation Frame Fired”事件右上角的红色三角形。但你看到有红色三角形出现的时候，代表该事件存在问题。

注意：当requestAnimationFrame()回调执行时，会触发“Animation Frame Fired ”事件的触发

5. 点击 Animation Frame Fired事件时， 「Summary」选项卡会显示该事件的相关信息。注意 reveal连接，点击连接， 「DevTools」会突出显示启动该 Animation Frame Fired事件的事件。同时还要注意 app.js:94连接，点击会跳到源代码中的相关行。

「图12」：关于Animation Frame Fired事件的更多消息

注意：选择事件后，可使用方向键选择该事件旁边的事件

6. 在app.update事件下方，有一堆紫色事件。若是将其放宽，会看到几乎每一个紫色事件上都有一个红色三角形。如今单击其中一个紫色的Layout事件。查看「DevTools」中的「Summary」选项卡提供的信息，会发现确实存在强制重排（reflows)的警告(也就是强制布局的警告)

7. 在「Summary」选项卡中，单击Layout Forced下的app.js:70连接，「DevTools」会切换到触发强制布局的代码行

「图13」：触发强制布局的代码行

注意： 此代码的问题是: 在每帧动画帧中，它都会修改正方形的样式，而后查询页面上每一个正方形的位置。因为样式已被修改，浏览器就不知道正方形的位置是否有更改，因此就须要从新布局正方形才能计算其位置。能够查看[ Use transform and opacity changes for animations ](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance)学习更多相关知识

作得很好，因此花费了一些时间，可是如今你已经有分析运行性能的坚实基础了。

额外：分析优化版本

单击演示页面上的Optimize按钮，启动优化了代码的版本，而后使用刚学习的流程和工具进行性能记录，而后分析结果。从改进的帧率到“Main”块火焰图中事件的减小，你看到优化版本的应用作了更少的工做，从而得到更好的性能；

注意： 这个“优化”版本也不是最好的，由于它仍然操做每一个正方形的 top 属性。更好的方法是只操做影响合成的属性。有关更多信息，请参见 Use transform and opacity changes for animations

下一步

RAIL模型是了解性能的基础。该模型告诉你，对用户而言，哪些是最重要的性能指标。有关更多信息，请查看Measure performance with the RAIL model

更多的实践能让你对「Performance」选项卡更加的熟悉。请尝试对你本身的页面进行分析，并分析结果。若是你对你的结果有任何疑问，能够在Stack Overflow发布一个标有google-chrome-devtools标签的问题。若是能够，请附上屏幕截图或指向可复制页面的连接

要真正掌握运行时性能，你必须学习浏览器如何将HTML、CSS和JS转换为屏幕上像素点。能够从 Rendering Performance Overview开始学习。The Anatomy Of A Frame这篇文章深刻讨论了更多细节。

最后，有许多方法能够改善运行时性能。 本教程重点介绍了一个特定的动画瓶颈，以使您能够重点关注「Performance」面板，但这只是您可能遇到的许多瓶颈之一。 渲染性能系列的其他部分提供了许多改善运行时性能各个方面的好技巧，例如：

• Optimizing JS Execution
• Reduce The Scope And Complexity Of Style Calculations
• Avoid Large, Complex Layouts And Layout Thrashing
• Simplify Paint Complexity And Reduce Paint Areas
• Stick To Compositor-Only Properties And Manage Layer Count
• Debounce Your Input Handlers

Reference

[1]

Devtools是什么: chrome的开发者工具，由几个选项卡工具组成。

[2]

没法获得表现一致的演示（译者注）: 由于用户的设备配置和performance选项版配置的不一样。

[3]

为何是60 FPS: 与人眼识别有关系

本文使用 mdnice 排版