前端性能分析实战(一)-Get Started With Analyzing Runtime Performance

古城微笑少年丶 2022-12-23 09:50 148阅读 0赞

> [原文：Get Started With Analyzing Runtime Performance][Get Started With Analyzing Runtime Performance]

## 开始动手 ##

在本教程中，你将在实时页面上打开开发工具，并使用性能面板来查找页面上的性能瓶颈。

1.  以[匿名模式][Link 1]打开谷歌浏览器。匿名模式确保Chrome在无其他干扰的状态下运行。例如，如果你安装了许多插件，这些插件可能会在你的性能监测中产生结果干扰。
2.  在匿名窗口中打开后面给出的链接页面。你可以用这个页面作为一个实践小demo。这个网页上展示了一堆上下移动的蓝色小方块。[https://googlechrome.github.io/devtools-samples/jank/][https_googlechrome.github.io_devtools-samples_jank]
3.  按`Command + Option + I (Mac)`或`Control + Shift + I (Windows, Linux)`打开开发工具。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-au6OL0ez-1606201079867)(https://images.fengjiaheng.top/images/20190827/01/01.png)\]

> 注意: 对于截屏的其余部分，开发工具被移除到一个单独的窗口，这样你可以更好地看到它的内容。

### 模拟一个移动设备CPU ###

移动设备的CPU能力比台式机和笔记本电脑低得多。每当您分析页面时，请使用`CPU Throttling`来模拟您的页面在移动设备上的运行方式。

1.  在`DevTools`中，点击`Performance`标签页。
2.  确保`Screenshots`复选框是`已启用`状态。
3.  点击`Capture Settings`，DevTools显示与“如何捕获性能指标”相关的设置。
4.  `CPU`这一项，选择`2x slowdown`，DevTools会调节你的CPU速度为平时的`1/2`。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-seN9BmZv-1606201079869)(https://images.fengjiaheng.top/images/20190827/01/02.svg)\]

> 注意:在测试其他页面时，如果您想确保它们在低端移动设备上运行良好，请将CPU节流设置为20倍。这个演示在减速20倍的情况下效果不好，所以它只是使用减速2倍作为教学目的。

### 设置一个供演示的demo ###

很难为这个这篇文章的所有读者创建一个始终不变的运行时性能演示。本篇文章允许您自定义演示，以确保您的体验与您在本教程中看到的截屏和描述相对一致，无论您的具体设置如何。

1.  一直点击`Add 10`按钮，直到蓝色方块的移动速度明显慢于以前。在配置较高的机器上，可能需要大约20次点击。
2.  单击`Optimize`按钮。蓝色方块应该移动得更快更平稳。

*  > 注意:如果您没有看到优化版本和非优化版本之间明显的差异，请尝试单击几次`Subtract 10`，然后重试。如果你添加了太多的蓝色方块，你只需要最大限度地利用CPU，你不会看到两个版本的结果有很大的不同。

1.  单击`Un-Optimize`。蓝色方块移动得更慢，有更多残影出现。

### 录制Runtime的性能 ###

当您运行页面的优化版本时，蓝色方块移动得更快。为什么？两个版本都应该在相同的时间内移动每个正方形相同的空间。在性能面板中进行记录，了解如何检测未优化版本中的性能瓶颈。

1.  在`DevTools`中，单击`Record ⚫`。`DevTools`在页面运行时捕获性能指标。

![图3:分析页面][3]

1.  等待几秒钟
2.  点击`stop`，开发工具停止录制，处理数据，然后在性能面板上显示结果。

![图4:录制的概要文件][4]

这是一个巨大的数据量。别担心，很快就会明白的。

## 结果分析 ##

一旦记录了页面的性能，就可以了解到你的页面的性能有多差，并找出原因。

### 分析每秒帧数 ###

衡量任何动画性能的主要指标是每秒帧数。当动画以每秒60帧的速度运行时，用户的体验比较良好。

1.  注意观察`FPS`图表，每当你看到FPS上面有一个红色条，这意味着帧率下降得很低，可能会损害用户体验。一般来说，绿色条越高，FPS越高。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9SeJxyhL-1606201079874)(https://images.fengjiaheng.top/images/20190827/01/05.svg)\]

1.  在`FPS`图表下方，您可以看到`CPU`图表。`CPU`图表中的颜色对应于`Performance`面板底部的`Summary`选项卡中的颜色。事实上，`CPU`图表充满了颜色，这意味着在录制过程中`CPU`已达到最大值。每当你看到`CPU`长时间超负荷运转，这就表示你要想办法减少`CPU`的负荷量。

![图6，CPU图表和标签页，蓝色框选部分。][6_CPU]

1.  将鼠标悬停在`FPS`、`CPU`或`NET`图表上。DevTools显示了该时间点的页面截图。左右移动鼠标重放录制。这被称为`scrubbing`，对于手动分析动画过程非常有用。

![图7，查看记录2000毫秒左右标记的页面截图][7_2000]

1.  在`Frames`部分，将鼠标悬停在一个绿色方块上。开发工具向您展示了特定框架的FPS。每帧可能远低于60帧每秒的目标。

![图8，悬浮在一个frame上][8_frame]

当然，有了这个演示，很明显页面表现不好。但是在真实的场景中，可能不太清楚，所以拥有所有这些工具来进行测量是很方便的。

**拓展：打开FPS仪表**

另一个方便的工具是FPS计量器，它在页面运行时提供FPS的实时估计。

1.  按`Command + Option + I (Mac)`或`Control + Shift + I (Windows, Linux)`打开开发工具。
2.  开始在命令菜单中键入`Rendering`，然后选择`Show Rendering`。
3.  在`Rendering`选项卡中，启用`FPS Meter`。新弹出层会出现在页面的右上角。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qo2cwoG2-1606201079882)(https://images.fengjiaheng.top/images/20190827/01/09.svg)\]

禁用`FPS meter`，然后按退出键关闭`Rendering`选项卡。在本教程中，您不会用到它。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kfUmzXlb-1606201079883)(https://images.fengjiaheng.top/images/20190827/01/10.png)\]

### 找到性能瓶颈 ###

既然您已经测量并验证了动画的表现不佳，接下来要回答的问题是:为什么？

1.  请注意`summary`选项卡。当没有选择事件时，此选项卡显示活动的明细。页面大部分时间都在渲染。因为性能是减少工作量的艺术，所以您的目标是减少渲染工作所花费的时间。

![图10: 选项卡，蓝色框选部分][10_]

1.  展开`Main`部分。DevTools向您展示了一个主线程活动的火焰图。x轴代表一段时间内的记录。每个条代表一个事件。更宽的酒吧意味着活动需要更长的时间。y轴代表调用堆栈。当你看到事件堆叠在一起，这意味着上层事件导致下层事件。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BS5y06ln-1606201079884)(https://images.fengjiaheng.top/images/20190827/01/14.svg)\]

1.  `录制结果`里有很多数据。通过在概览上单击、按住并拖动鼠标来放大单个动画帧触发事件，概览是包含`FPS`、`CPU`和`NET`图表的部分。`Main`和`Summary`选项卡仅显示录制的选定部分的信息。

![图12 : 放大单个动画帧触发事件][12 _]

> 注意：缩放的另一种方法是通过点按主部分的背景或选择一个事件来聚焦主部分，然后按下“W”、“A”、“S”和“D”键。

1.  注意动画帧触发事件右上角的红色三角形。每当你看到一个红色三角形，这是一个警告，可能有一个问题与此事件有关

> 注意：每当执行requestAnimationFrame()回调时，都会发生动画帧触发事件。

1.  单击`Animation Frame Fired`事件。`Summary`选项卡现在向您显示有关该事件的信息。请注意显示链接。单击此按钮可使开发工具突出显示启动`Animation Frame Fired`的事件。还要注意`app.js:94`链接。单击它会跳转到源代码中的相关行。

![图13:关于动画帧触发事件的更多信息][13]

> 注意:选择事件后，使用箭头键选择它旁边的事件。

1.  在`app.update`事件下，有一堆紫色事件。如果它们更宽，看起来好像每个上面都有一个红色的三角形。现在单击紫色`Layout`事件之一。开发工具在`Summary`选项卡中提供了有关事件的更多信息。事实上，有一个关于强制回流的警告(布局的另一个词)。
2.  在`Summary`选项卡中，单击`Layout Forced`的`app.js:70`链接。DevTools会带您进入强制布局的代码行。

![图13:导致强制布局的代码行][13 1]

> 注意:这段代码的问题是，在每个动画帧中，它会改变每个正方形的样式，然后查询每个正方形在页面上的位置。因为样式改变了，浏览器不知道每个正方形的位置是否改变了，所以它必须重新布局正方形来计算它的位置。请参阅避免强制同步布局了解更多信息。

唷！这需要考虑很多，但是您现在已经在分析运行时性能的基本工作流中有了坚实的基础。干得好。

### 拓展：分析优化版本 ###

使用您刚刚学到的工作流和工具，单击演示中的`Optimize`以启用优化的代码，进行另一次性能记录，然后分析结果。从帧速率的提高到`Main`部分火焰图中事件的减少，您可以看到该应用程序的优化版本工作更少，从而获得更好的性能。

> 注意:即使这个“优化”版本也没那么好，因为它仍然可以操纵每个方块的顶部属性。更好的方法是坚持只影响合成的属性。有关更多信息，请参见使用动画的变换和不透明度更改。

## 后续 ##

理解性能的基础是RAIL模型。这个模型教你对用户最重要的性能指标。请参阅[Measure Performance With The RAIL Model][]以了解更多信息。

为了更好地使用性能面板，多加操作练习是必需的。试着分析你自己的页面并分析结果。如果你对你的结果有任何疑问，[打开一个用谷歌浏览器开发工具标记的堆栈溢出问题][Link 2]。如果可能，包括截图或可复制页面的链接。

要真正掌握运行时性能，您必须了解浏览器如何将HTML、CSS和JS翻译成屏幕上的像素。可以从[渲染性能概述][Link 3]开始。从[框架深入剖析][Link 4]中可以了解到更多细节。

最后，有许多方法可以提高运行时性能。本教程重点介绍了一个特定的动画瓶颈，让您可以在“性能”面板中进行集中浏览，但这只是您可能遇到的许多瓶颈之一。渲染性能系列的其余部分有许多改善运行时性能各个方面的好建议，例如:

*  [Optimizing JS Execution（优化JS执行）][Optimizing JS Execution_JS]
 *  [Reduce The Scope And Complexity Of Style Calculations（降低样式计算的范围和复杂性）][Reduce The Scope And Complexity Of Style Calculations]
 *  [Avoid Large, Complex Layouts And Layout Thrashing（避免大而复杂的布局和布局抖动）][Avoid Large_ Complex Layouts And Layout Thrashing]
 *  [Simplify Paint Complexity And Reduce Paint Areas（简化绘制复杂性并减少绘制面积）][Simplify Paint Complexity And Reduce Paint Areas]
 *  [Stick To Compositor-Only Properties And Manage Layer Count（注意合成器的属性和布局层数）][Stick To Compositor-Only Properties And Manage Layer Count]
 *  [Debounce Your Input Handlers（消除输入处理程序的抖动）][Debounce Your Input Handlers]

[Get Started With Analyzing Runtime Performance]: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
[Link 1]: https://support.google.com/chrome/answer/95464
[https_googlechrome.github.io_devtools-samples_jank]: https://googlechrome.github.io/devtools-samples/jank/
[3]: /images/20221120/41d4c2da7de34a2fa6fefba34c5bda4f.png
[4]: /images/20221120/09d91d696e1240318f662b6f231115e4.png
[6_CPU]: /images/20221120/75f1bf41bf5043bd879698d496a9115f.png
[7_2000]: https://img-blog.csdnimg.cn/img_convert/3a1251858fe13a69528a565573f7ff3e.png
[8_frame]: https://img-blog.csdnimg.cn/img_convert/55304473b175ec3fe6acb10fdd01851b.png
[10_]: https://images.fengjiaheng.top/images/20190827/01/11.png
[12 _]: https://img-blog.csdnimg.cn/img_convert/aacf31a88e5bad443f8588bdf8b72635.png
[13]: https://img-blog.csdnimg.cn/img_convert/d00454e0e59533ea4719f4d6cb2ea40c.png
[13 1]: https://img-blog.csdnimg.cn/img_convert/944e43e3fa61d6a5fa58ea61384d4249.png
[Measure Performance With The RAIL Model]: https://developers.google.com/web/fundamentals/performance/rail
[Link 2]: http://stackoverflow.com/questions/ask?tags=google-chrome-devtools
[Link 3]: https://developers.google.com/web/fundamentals/performance/rendering/
[Link 4]: https://aerotwist.com/blog/the-anatomy-of-a-frame/
[Optimizing JS Execution_JS]: https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution
[Reduce The Scope And Complexity Of Style Calculations]: https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations
[Avoid Large_ Complex Layouts And Layout Thrashing]: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
[Simplify Paint Complexity And Reduce Paint Areas]: https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas
[Stick To Compositor-Only Properties And Manage Layer Count]: https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count
[Debounce Your Input Handlers]: https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers