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

原文:Get Started With Analyzing Runtime Performance

开始动手

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

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

图1。左边是演示,右边是开发工具

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

模拟一个移动设备CPU

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

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

图2 .CPU节流,蓝框内。

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

设置一个供演示的demo

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

  1. 一直点击Add 10按钮,直到蓝色方块的移动速度明显慢于以前。在配置较高的机器上,可能需要大约20次点击。
  2. 单击Optimize按钮。蓝色方块应该移动得更快更平稳。
    • 注意:如果您没有看到优化版本和非优化版本之间明显的差异,请尝试单击几次Subtract 10,然后重试。如果你添加了太多的蓝色方块,你只需要最大限度地利用CPU,你不会看到两个版本的结果有很大的不同。

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

录制Runtime的性能

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

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

图3:分析页面

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

图4:录制的概要文件

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

结果分析

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

分析每秒帧数

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

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

图五,FPS图表,蓝色框选部分。

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

图六,CPU图表和摘要信息标签页,蓝色框选部分。

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

图7,查看记录2000毫秒左右标记的页面截图

接下来






推荐文章