性能优化工具知识梳理(4) - Hierarchy Viewer

性能优化工具知识梳理(1) - TraceView
性能优化工具知识梳理(2) - Systrace
性能优化工具知识梳理(3) - 调试GPU过度绘制 & GPU呈现模式分析
性能优化工具知识梳理(4) - Hierarchy Viewer
性能优化工具知识梳理(5) - MAT
性能优化工具知识梳理(6) - Memory Monitor & Heap Viewer & Allocation Tracker
性能优化工具知识梳理(7) - LeakCanary
性能优化工具知识梳理(8) - Lint

一、概述

Hierarchy Viewer是我们平时开发中常用的工具,通过它我们可以得到某个界面中的布局层次,今天我们来介绍一下如何使用这个工具来优化布局。

Hierarchy工具位于SDK/tools目录下,直
接运行之后我们会得到下面这个界面:


它提供了下面两个功能:

  • Load View Hierarchy
  • Inspect Screenshot

因为主要是讨论如何用它来分析性能问题,所以我们主要介绍第一个功能。

二、Hierarchy分析

2.1 整体布局分析

Hierarchy Viewer的根界面,它列出了当前手机或者模拟器中可见的Window,假如我们要分析某个Activity,那么点击它,再点击Load View Hierarchy后,就会得到下面这个界面:


这个界面一共分为四个部分,它们分别是:

  • Tree View
    这里面将Activity的所有View呈现成为一个树形结构,它提供了以下几种操作方式:
    • 通过拖动条来放大或缩小可视范围。
    • 通过输入类名或者Viewid来迅速定位到需要分析的View
    • 通过上方的Save as PNG或者Capture Layers保存当前的树形结构。
  • Tree Overview
    这相当于是Tree View的缩小版,可以通过它快速查看或者定位。
  • Properties View
    当我们选取了一个View的时候,它会列出对应View的属性。
  • Layout View
    当我们选取了一个View之后,会在这个区域内,显示出不同颜色的矩形框,其中红色就是我们选取的View的范围,而淡红色则是该View对应的父容器的范围,其它的白色矩形框既不是该View的父容器,也不是该View的子控件。

需要注意,当Window的布局变化时,是不会主动刷新的,如果我们想要查看最新的布局情况,那么就要点击上方的Load View Hierarchy来刷新,而如果我们想要去查看别的Window布局,那么就需要点击下方操作栏最左边的按钮,重新进入选择Window的窗口。

2.2 单个布局元素分析

对于Tree View中的每个节点,我们可以获得以下信息:

  • View的类名
  • View所存储的地址
  • Viewid属性值
  • View绘制的相对耗时分析,它会根据measure/layout/draw这三个阶段,分为三个小点展示,而小点的颜色就代表了它在这个阶段相对于View树中的其他View在同一阶段的耗时对比结果
  • 绿色:在前50%
  • 黄色:在后50%
  • 红色:耗时最长
  • View处于它的父容器的index

如果我们选择了一个View,那么会有更加详细的信息:

  • View和它的子View在当前在屏幕上的结果。
  • View的子View个数。
  • View各绘制阶段耗时,单位为ms,包括了它自己和它的子View的耗时。

2.3 如何调试

上面我们看到Hierarchy View可以得到绘制阶段的耗时,这些耗时是在上一次绘制的时候计算出的,我们也可以通过这个工具主动地触发重绘,以得到最新的结果,操作步骤为:

  • 选取一个View
  • 点击窗口上方的invalidate把这个View标记为需要重绘,那么在下次请求绘制的时候就会重绘它。
  • 点击窗口上方的request layout,来发起一次请求,这样它和它的子View以及需要重绘的View都会重新执行三个过程。

2.4 如何优化

Hierarchy View对于我们平时开发中的作用主要是以下几点:

  • 查看整个布局的深度,是否可以去掉一些不必要的层级,以尽量使View树保持扁平。
  • 查看measure、layout、draw当中那些红色或者黄色的节点,但是由于这些节点的颜色是包含了它和它的子View的时间,因此我们分析的时候,需要根据具体情况看究竟是由于ViewGroup的子View过多,还是View过于复杂引起的这一问题。

三、小结

今天主要介绍了Hierarchy Viewer和分析性能有关的用法,如果对于Inspect Screenshot有兴趣的同学可以查看下面官方文档的其它部分:

http://android.xsoftlab.net/tools/debugging/debugging-ui.html


更多文章,欢迎访问我的 Android 知识梳理系列:

推荐阅读更多精彩内容