[Web翻译]开始分析运行时性能

时间:2020-8-22 作者:admin

原文地址:developers.google.com/web/tools/c…

原文作者:developers.google.com/web/resourc…

注意:请参阅优化网站速度,了解如何使您的网页加载速度更快。

运行时性能是指页面在运行时的性能,而不是加载时的性能。本教程教你如何使用Chrome DevTools性能面板来分析运行时性能。就 RAIL 模型而言,您在本教程中学到的技能对于分析页面的响应、动画和闲置阶段非常有用。

注意:本教程是基于Chrome 59的。本教程基于 Chrome 59。如果您使用其他版本的 Chrome 浏览器,DevTools 的用户界面和功能可能会有所不同。请检查 chrome://help以查看您正在运行的 Chrome 浏览器版本。

开始使用

在本教程中,您将在一个实时页面上打开DevTools,并使用性能面板来查找页面上的性能瓶颈。

  1. 在 “隐身模式 “下打开谷歌浏览器。Incognito模式可以确保Chrome浏览器在干净的状态下运行。例如,如果你安装了很多扩展程序,这些扩展程序可能会在你的性能测量中产生噪音。

  2. 在你的Incognito窗口中加载以下页面。这就是你要进行配置文件的演示。该页面显示了一堆蓝色的小方块上下移动。

https://googlechrome.github.io/devtools-samples/jank/

  1. 按Command+Option+I (Mac)或Control+Shift+I (Windows, Linux)打开DevTools。

[Web翻译]开始分析运行时性能

图1.左边是演示,右边是DevTools。左边是演示,右边是DevTools。

:在剩下的截图中,DevTools被解锁到一个单独的窗口中,这样你可以更好地看到它的内容。

模拟移动CPU

移动设备的CPU功率比台式机和笔记本电脑低得多。每当您对页面进行配置文件时,请使用 CPU 节流来模拟您的页面在移动设备上的执行情况。

  1. 在DevTools中,单击 “性能 “选项卡。

  2. 确保 “截屏 “复选框已启用。

  3. 单击 “捕获设置 “捕获设置。DevTools 会显示与如何捕获性能指标有关的设置。

  4. 对于CPU,选择2倍减速。DevTools 会对 CPU 进行节流,使其比平时慢 2 倍。

[Web翻译]开始分析运行时性能

图2.CPU节流 CPU节流,用蓝色勾勒

注意:在测试其他页面时,如果你想确保它们在低端移动设备上运行良好,请将CPU Throttling设置为20倍慢速。这个demo在20倍慢速的情况下效果不好,所以只使用2倍慢速进行教学。

设置演示

要创建一个对本网站所有读者都能一致使用的运行时性能演示是很难的。本节让你自定义演示,以确保你的体验与你在本教程中看到的截图和描述相对一致,无论你的特定设置如何。

  1. 继续点击添加10,直到蓝色方块的移动速度明显比之前慢。在高端机器上,可能需要点击20次左右。

  2. 点击 “优化“。蓝色方块应该会移动得更快、更流畅。

注意:如果你没有看到优化版和未优化版之间的明显差异,请尝试点击减去10几次,然后再尝试。如果你添加了太多的蓝色方块,你只是会把CPU用到最大,你不会看到两个版本的结果有很大的区别。

  1. 点击 “取消优化“。蓝色方块的移动速度又慢了,而且有更多的jank。

记录运行时的性能

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

  1. 在DevTools中,单击 “录制记录”。DevTools会在页面运行时捕获性能指标。

[Web翻译]开始分析运行时性能

图3:剖析页面

  1. 等待几秒钟。

  2. 单击 “停止“。DevTools 停止记录,处理数据,然后在性能面板上显示结果。

[Web翻译]开始分析运行时性能

图4:剖析结果

哇,这是一个压倒性的数据量。别担心,很快就会变得更有意义。

分析一下结果

一旦你有了网页的性能记录,你就可以衡量网页的性能有多差,并找到原因。

分析每秒的帧数

衡量任何动画性能的主要指标是每秒帧数(FPS)。当动画以60 FPS的速度运行时,用户会很高兴。

  1. 请看FPS图表。每当你看到FPS以上的红条,就意味着帧率降得太低,很可能会损害用户体验。一般来说,绿条越高,FPS越高。

[Web翻译]开始分析运行时性能

图5:FPS图,蓝色勾勒

  1. FPS图的下方,你可以看到CPU图。CPU图中的颜色与性能面板底部的 “摘要“选项卡中的颜色相对应。事实上,CPU图表中充满了颜色,意味着在录制过程中CPU已经达到了最大值。每当你看到CPU长时间处于最大限度的状态时,就会提示你想办法减少工作。

[Web翻译]开始分析运行时性能

图6:CPU图表和摘要选项卡,用蓝色勾勒。

  1. 将鼠标悬停在FPSCPUNET图表上。DevTools会显示该时间点的页面截图。向左和向右移动鼠标来重放记录。这称为擦洗,对于手动分析动画的进展非常有用。

[Web翻译]开始分析运行时性能

图7:查看录制2000ms左右的页面截图。

  1. 在 “帧 “部分,将鼠标悬停在其中一个绿色方块上。DevTools会向您显示该特定帧的FPS。每一帧可能远远低于60 FPS的目标。

[Web翻译]开始分析运行时性能

图8:悬停在一个框架上

当然,通过这个演示,很明显可以看出页面的表现不佳。但在实际场景中,可能就不是那么清楚了,所以有这些工具来进行测量就很方便了。

奖励:打开FPS表

另一个方便的工具是FPS表,它可以在页面运行时提供实时估计的FPS。

  1. 按Command+Shift+P(Mac)或Control+Shift+P(Windows、Linux)打开命令菜单。
  2. 在命令菜单中开始键入 “渲染“,然后选择 “显示渲染“。
  3. 在 “渲染“选项卡中,启用 “FPS Meter“。一个新的叠加出现在你视口的右上方。

[Web翻译]开始分析运行时性能

图9:FPS表

  1. 禁用FPS表并按Escape键关闭渲染选项卡。在本教程中你不会用到它。

找到瓶颈

现在你已经测量并验证了动画的性能不佳,接下来要回答的问题是:为什么?

  1. 请注意摘要选项卡。当没有选择任何事件时,这个选项卡会向你显示活动的分类。页面的大部分时间都花在了渲染上。由于性能是做更少工作的艺术,你的目标是减少做渲染工作的时间。

[Web翻译]开始分析运行时性能

图10:”摘要 “选项卡,用蓝色勾勒。

  1. 展开主线部分。DevTools向您展示了主线程上随时间推移的活动火焰图。X轴代表一段时间内的记录。每个条形图代表一个事件。更宽的条形图表示该事件耗时更长。y轴代表调用堆栈。当你看到事件叠加在一起时,意味着上层事件引起了下层事件。

[Web翻译]开始分析运行时性能

图11:主要部分,用蓝色勾勒。

  1. 记录中的数据很多。通过点击、按住并将鼠标拖动到 “概述“上,放大单个动画帧触发事件,该部分包括FPSCPUNET图表。主要部分和摘要选项卡只显示所选部分的记录信息。

[Web翻译]开始分析运行时性能

图12:放大单个动画帧的触发事件

:另一种缩放方式是通过点击其背景或选择一个事件来聚焦部分,然后按W、A、S和D键。

  1. 请注意动画帧发射事件右上方的红色三角形。每当你看到一个红色的三角形,这是一个警告,说明可能存在与该事件相关的问题。

注意:每当执行requestAnimationFrame()回调时,就会发生Animation Frame Fired事件。

  1. 单击Animation Frame Fired事件。现在,”摘要“选项卡显示了有关该事件的信息。注意揭示链接。单击该链接会使 DevTools 高亮显示启动 Animation Frame Fired事件的事件。还请注意app.js:94链接。点击该链接会跳转到源代码中的相关行。

[Web翻译]开始分析运行时性能

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

注意:选择一个事件后,用方向键选择旁边的事件。

  1. app.update事件下,有一堆紫色的事件。如果它们更宽,看起来好像每个事件上都可能有一个红色的三角形。现在点击其中一个紫色的Layout事件。DevTools在 “摘要“选项卡中提供了有关该事件的更多信息。事实上,有一个关于强制回流(布局的另一个词)的警告。

  2. 摘要选项卡中,点击Layout Forced下的app.js:70链接。DevTools会带你到强制布局的那行代码。

[Web翻译]开始分析运行时性能

图13:引起强制布局的代码行。

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

Phew! 这是一个很大的问题,但你现在有一个坚实的基础,在分析运行时性能的基本工作流程。干得好。

奖励:分析优化后的版本

使用刚才学习的工作流程和工具,点击演示上的优化,启用优化后的代码,再进行一次性能记录,然后分析结果。从帧率的提高到Main部分的火焰图中事件的减少,你可以看到优化版的应用所做的工作要少得多,从而获得更好的性能。

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

接下来的步骤

了解性能的基础是RAIL模型。这个模型教你了解对用户最重要的性能指标。请参阅 “用RAIL模型衡量性能“了解更多。

要想更自如地使用性能面板,就要熟能生巧。试着分析您自己的网页并分析结果。如果您对结果有任何疑问,请打开一个标记为 google-chrome-devtools的 Stack Overflow 问题。如果可能的话,请附上截图或可重现页面的链接。

要想成为运行时性能方面的专家,你必须了解浏览器如何将HTML、CSS和JS转化为屏幕上的像素。最好的起点是《渲染性能概述》。The Anatomy Of A Frame则会深入了解更多细节。

最后,有很多方法可以提高运行时性能。本教程专注于一个特定的动画瓶颈,让你有针对性地参观性能面板,但这只是你可能遇到的许多瓶颈之一。渲染性能系列的其他部分有很多提高运行时性能各方面的好技巧,比如。


通过( www.DeepL.com/Translator)(免费版)翻译

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。