安卓入门五十九 布局优化

布局复杂度:布局复杂会导致布局需要更长的时间,从而导致进入应用慢、页面切换慢;

启动 Hierarchy Viewer

将设备连接到计算机。如果设备上显示对话框提示您允许 USB 调试吗?,请点按确定。

在 Android Studio 中打开您的项目,在您的设备上构建并运行项目

启动 Android Device Monitor。Android Studio 可能会显示 Disable adb integration 对话框,因为一次只能有一个进程通过 adb 连接到设备,并且 Android Device Monitor 正在请求连接。因此,请点击 Yes。

图演示了 Android Device Monitor 中最初显示的内容。

在菜单栏中,依次选择 Window > Open Perspective,然后点击 Hierarchy View。

您应该会看到类似于图 2 所示的排列方式。如果没有看到,请依次选择 Window > Reset Perspective 以返回默认布局。

在左侧的 Windows 标签页中双击应用的软件包名称。这会使用应用的视图层次结构填充相关窗格。

Hierarchy Viewer 提供了以下窗格:

  • Tree View(中央):显示视图层次结构的树状视图。您可以使用鼠标和底部的缩放控件来拖动和缩放树。每个节点都指示它的 View 类名和 ID 名称。
  • Tree Overview(右上方):可让您一览应用的完整视图层次结构。移动灰色矩形可更改 Tree View 中可见的视口。
  • Layout View(右下方):显示布局的线框视图。当前所选视图的轮廓为红色,其父视图为浅红色。
  • 在此处点击某个视图也会在 Tree View 中选择该视图,反之亦然。

视图层次结构是布局的快照,因此它不会自动更新。 如需更新层次结构视图,请点击 Reload the view hierarchy 图标 

如需使某个视图无效(请求在下一次布局更新期间对 onDraw() 进行系统调用),请选择层次结构中的相应视图,然后点击 Invalidate the layout 图标 (这与在视图中调用 invalidate() 等效)。要请求实际布局视图(及任何子级),请点击 Request lay out 图标 

如果您转到其他应用,则必须从左侧窗格的 Windows 标签页中选择该应用,以查看其视图层次结构。

要查看有关视图的详细信息,包括其度量、布局和绘制时间,请在 Tree View 中点击该视图。双击该视图可查看其放大图片。

如需查看视图的属性,请点击左侧窗格中的 View Properties 标签页

如需将布局的分层屏幕截图保存到 Adobe Photoshop (PSD) 文件中,请点击工具栏中的 Capture the window layers 图标 。每个视图都会另存为自己的图层,因此您可以通过隐藏和调整每个视图来轻松创建新模拟。

分析布局

您已经了解了该工具的用法,现在可以使用它来分析视图层次结构并解读结果了。

  • 在 Tree View 或 Layout View 中,点击要分析其子级的视图节点。
  • 如需开始分析,请点击 Tree View 顶部的 Obtain layout times 图标 
  • 对于大型视图层次结构,分析可能需要几秒钟。

  • 所选节点的每个子视图都有三个圆点,可以是绿色、黄色或红色。
  • 左边圆点表示渲染管道的绘制过程
  • 中间圆点表示布局阶段。
  • 右点圆点表示执行阶段。

这些圆点大致对应于处理管道的测量、布局和绘制阶段。 圆点的颜色表示该节点相对于本地系列中所有其他已分析节点的相对性能。

  • 绿色表示视图的渲染速度至少比一半的其他视图快。
  • 黄色表示视图渲染速度比其他视图中渲染速度最慢的那一半快。
  • 红色表示视图是渲染速度最慢的那一半视图之一。

解读结果

Hierarchy Viewer 可测量每个节点相对于同级视图的性能,因此分析结果中总是有红色节点(除非所有视图以完全相同的方式执行),并且这并不一定意味着红色节点就是表现不佳(只不过它是本地视图组中最慢的视图而已)。

Hierarchy Viewer 会栅格化您的布局以获取时间信息。栅格化是获取高级基元(如圆形或矢量字体)并将其转换为屏幕上的像素的过程。栅格化通常由设备上的 GPU 完成,但对于软件栅格化,渲染是使用普通软件在 CPU 上完成的。这意味着绝对报告时间相对于彼此是正确的,但会随着设备和开发机器上不断变化的总体 CPU 工作负载而变化。因此,它不能反映设备上的实际性能速度,您应该进行多次分析以了解平均测量结果。

如果应用的运行速度出乎意料地慢,则红色节点可能有问题。在相对设置中,总有一个最慢的节点;只需确保它是您预期的节点即可。以下示例说明了如何解读红色圆点。

  • 查找叶节点中的红色圆点或仅包含少数子级的视图组。这可能会找到问题所在。应用的运行速度可能并不缓慢,或者在设备上的运行速度并不慢,但您需要注意这个圆点为何显示为红色。Systrace 或 Traceview 可为您提供更多信息。
  • 如果您有一个包含许多子级的视图组和一个红色测量阶段,请查看相应子级以了解它们的执行情况。
  • 带有黄色甚或红色圆点的视图在设备上的执行速度可能并不慢。这正是实际数字的用武之地。Systrace 或 Traceview 可为您提供更多信息。
  • 如果层次结构的根视图具有红色测量阶段、红色布局阶段和黄色绘制阶段,那这就是一个比较典型的情况,因为它是所有其他视图的父级,并且只有在子级完成之后其布局才会完成。

如果具有 20 个以上视图的树中的某个叶节点包含红色绘制阶段,则表示存在问题。请检查 onDraw() 方法中是否有不应存在的代码。

​​​​​​使用 Hierarchy Viewer 分析布局  |  Android Studio  |  Android Developers (google.cn)

分析 GPU 渲染速度

GPU 渲染模式分析工具以滚动直方图的形式直观地显示渲染界面窗口帧所花费的时间(以每帧 16.67 毫秒的时间作为对比基准)。

在性能较低的 GPU 上,可用的填充率(GPU 填充帧缓冲区的速度)可能很低。随着绘制一帧所需的像素数的增加,GPU 可能需要更长的时间来处理新命令,并要求系统的其余任务等待,直到它跟上进度。此分析工具可帮助您确定 GPU 何时因尝试绘制像素而不堪重负,或何时因大量的过度绘制而被拖累。

注意:此分析工具不适用于使用 NDK 的应用。这是因为每当 OpenGL 采用全屏上下文时,系统都会将框架消息推送到后台。在这种情况下,您可能会发现 GPU 制造商提供的分析工具很有帮助。

启用性能分析器

开始前,请确保您使用的是搭载 Android 4.1(API 级别 16)或更高版本的设备,并启用开发者选项。如需在使用应用时开始分析设备 GPU 渲染,请执行以下操作:

  • 在您的设备上,转到设置并点按开发者选项。
  • 在监控部分,选择 GPU 渲染模式分析或 HWUI 渲染模式分析,具体取决于设备上搭载的 Android 版本。
  • 在“GPU 渲染模式分析”对话框中,选择在屏幕上显示为条形图,将图表以条形图的形式叠加在您设备的屏幕上。
  • 打开您要分析的应用。

检查输出

在图 1 中显示的 GPU 渲染模式分析图形的放大图像中,您可以看到 Android 6.0(API 级别 23)上显示的彩色部分。

下面是有关输出的几点注意事项:

  • 对于每个可见应用,该工具将显示一个图形。
  • 沿水平轴的每个竖条代表一个帧,每个竖条的高度表示渲染该帧所花的时间(以毫秒为单位)。
  • 水平绿线表示 16.67 毫秒。若要实现每秒 60 帧,代表每个帧的竖条需要保持在此线以下。当竖条超出此线时,可能会使动画出现暂停。
  • 该工具通过加宽对应的竖条并降低透明度来突出显示超出 16.67 毫秒阈值的帧。
  • 每个竖条都有与渲染管道中某个阶段对应的彩色区段。区段数因设备的 API 级别不同而异。

下表介绍了在使用运行 Android 6.0 及更高版本的设备时,分析器输出中某个竖条的每个区段。

4.0(API 级别 14)和 5.0(API 级别 21)之间的 Android 版本具有蓝色、紫色、红色和橙色区段。低于 4.0 的 Android 版本只有蓝色、红色和橙色区段。下表显示的是 Android 4.0 和 5.0 中的竖条区段。

如需详细了解如何解释分析工具提供的信息,请阅读使用 GPU 渲染模式分析工具进行分析

注意:尽管此工具名为“GPU 渲染模式分析”,但所有受监控的进程实际上发生在 CPU 中。通过将命令提交到 GPU 来触发渲染,GPU 也会异步渲染屏幕。在某些情况下,GPU 可能会有太多工作要处理,因此您的 CPU 必须先等待一段时间,然后才能提交新命令。如果发生这种情况,您将看到橙色竖条和红色竖条上出现峰值,且命令提交将被阻止,直到 GPU 命令队列中腾出更多空间。

直观呈现 GPU 过度绘制

这是开发者选项中的另一个功能,通过对您的界面进行彩色编码来帮助您识别过度绘制。当您的应用在同一帧中多次绘制相同像素时,便会发生过度绘制。因此,此图可显示您的应用可能在何处执行不必要的渲染工作,这可能是 GPU 多此一举地渲染用户不可见的像素所导致的性能问题。因此,您应尽可能修复过度绘制事件

如果您尚未执行此操作,请启用开发者选项。然后,如需在您的设备上直观呈现过度绘制问题,请按以下步骤操作:

  • 在您的设备上,转到设置并点按开发者选项。
  • 向下滚动到硬件加速渲染部分,并选择调试 GPU 过度绘制。
  • 在调试 GPU 过度绘制对话框中,选择显示过度绘制区域。

Android 将按如下方式为界面元素着色,以确定过度绘制的次数:

  • 真彩色:没有过度绘制
  •  蓝色:过度绘制 1 次
  •  绿色:过度绘制 2 次
  •  粉色:过度绘制 3 次
  •  红色:过度绘制 4 次或更多次

请注意,这些颜色是半透明的,因此您在屏幕上看到的确切颜色取决于您的界面内容。

现在,您已经可以辨别出您的布局中何处出现了过度绘制,请阅读如何减少过度绘制

请注意,有些过度绘制是不可避免的。在优化应用的界面时,应尝试达到大部分显示真彩色或仅有 1 次过度绘制(蓝色)的视觉效果。

检查 GPU 渲染速度和过度绘制  |  App quality  |  Android Developers (google.cn)