性能优化工具知识梳理(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呈现成为一个树形结构，它提供了以下几种操作方式：
  • 通过拖动条来放大或缩小可视范围。
  • 通过输入类名或者View的id来迅速定位到需要分析的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所存储的地址
• View的id属性值
• 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 知识梳理系列：

• Android 知识梳理目录：http://www.jianshu.com/p/fd82d18994ce
• 个人主页：http://lizejun.cn
• 个人知识总结目录：http://lizejun.cn/categories/