Layout detection and optimization of program performance optimization (2)


Alibaba P7 mobile Internet architect advanced video (in daily update) for free learning, please click:
This article will continue to introduce layout detection and optimization from the following two aspects:

  • [HierarchyViewer]
  • [Layout Inspector]

1、 Details of using hierarchy viewer

1.1. Function

The hierarchy viewer tool provides a hierarchical structure of visual interface display layout, which allows us to debug and optimize the interface layout structure.

1.2. Startup tools

There are two ways to start it. One is to enter hierarchyviewer by terminal command. The other is to open Android device monitor and add hierarchyviewer view. The first method has expired. It’s recommended to start it in the second way, but it doesn’t affect the use. The function is the same, just to integrate hierarchyviewer into Android device monitor

1.2.1 the first method:

Layout detection and optimization of program performance optimization (2)

The second method:
Layout detection and optimization of program performance optimization (2)

1.3. Equipment connection

If you are using a simulator or a development version of mobile phone, you can connect and debug directly. If not, the official provides two ways to connect the real machine:

1.3.1 install and configure viewserver through a third-party library, which is also the way I am currently using. The tool address is /… The configuration steps are relatively simple, mainly divided into the following three steps: add dependency, outer build.gradle file, add remote warehouse address of tool; inner build.gradle file, add dependency:

allprojects {
    repositories {
        maven { url "" }

dependencies {
    compile 'com.github.romainguy:ViewServer:017c01cd512cac3ec054d9eee05fc48c5a9d2de'
} apply for network permission in the manifest file

  <uses-permission android:name="android.permission.INTERNET"/> add the following code to the activities that need to be debugged in the application, start the viewserver, and then you can communicate with the hierarchy viewer:

public void onCreate(Bundle savedInstanceState) {
        // Set content view, etc.

    public void onDestroy() {

    public void onResume() {

1.3.2 the second way

By setting the environment variable, export Android? Hvproto = DDM, I use the mobile phone of Xiaomi note, 5.0 System, and find that it has no effect. When there is a mobile phone of nexus for children’s shoes in the brief book, it can be used normally. At present, no reason has been found.

1.4. Analyze page layout performance

1.4.1 select a node and click the button in the upper right corner to get the time of layout drawing, as shown in the figure:

Layout detection and optimization of program performance optimization (2)

Here we mainly focus on the following three circles, from left to right, representing the measurement of view, the performance of layout and draw, and different colors represent different performance levels:

1) Green: indicates that the performance of this view is faster than that of more than 50% views in this view tree; for example, the measurement time of a green dot means that the measurement time of this view is faster than that of the view object in the tree.

2) Yellow: indicates that the performance of this view is slower than that of more than 50% of views in this view tree; for example, a yellow dot layout means that this view has a slower layout time of more than 50% of tree view objects.

3) Red: indicates that this performance of the view is the slowest in the view tree; for example, the drawing time of a red dot means that all view objects are drawn on the tree according to the view that takes the most time.

1.4.2 measurement result analysis

Red nodes represent a potential problem of slow application performance. Here are a few examples. How to analyze and explain the cause of red dots?

1) If there are only a few child nodes in the leaf node or ViewGroup, this may reflect a problem. The application may not run slowly on the device, but you need to guide why this node is red. You can use systrace or traceview tools to get more additional information;

2) If there are many child nodes in a view group, and the measurement phase is red, you need to observe the drawing of child nodes;

3) If the root view in the view hierarchy is red in the message stage, red in the layout stage, and yellow in the draw stage, this is quite common, because this node is the parent class of all other views;

4) If a leaf node in the view structure has 20 views in the red draw phase, there is a problem. You need to check the OnDraw method in the code, which should not be called there.

1.5. Common layout problems and optimization suggestions

1) When there is no used parent layout, it means that there is no background drawing or size limit for the parent layout. Such a layout will not have any impact on the UI effect. We can reduce the UI level by combining the unused parent layouts with < merge / > tags;

2) Using linear layout and LinearLayout layout make the UI level deeper. If there are such problems, we use relative layout instead of LinearLayout to reduce the UI level;

3) Unusual UI is set to gone, such as abnormal error page. If there is such a problem, we need to use the < view stub / > tag instead of gone to improve UI performance.

2、 Layout inspector

2.1 open layout checker

    1. Run your app on a connected device or emulator.
    1. ClickTools > Android > Layout Inspector
    1. In theChoose ProcessDialog box, select the application process you want to check, and then clickOK

Layout detection and optimization of program performance optimization (2)

Note: if the layout on the device changes, the layout checker does not update. You must click Tools > Android > layout inspector again to create a new snapshot. Each snapshot is saved to a separate. Li file within project name / features /.

2.2 introduction to commissioning area

After opening the layout checker, the interface is as follows:

Layout detection and optimization of program performance optimization (2)

  • 1.View Tree: the hierarchical structure of the view in the layout.
  • 2.Screenshot: screenshot of the device with visual boundaries for each view.
  • 3.Properties Table: layout properties of the selected view.

In the screenshot, you can also click to select, but when there are overlapping views, you cannot directly select them in the screenshot (Part 2 above). You need to right-click the previous view in view tree, and then uncheck show in preview, so you can select the later view.

reference resources:……
Alibaba P7 mobile Internet architect advanced video (in daily update) for free learning, please click:


I hope you canPraise and pay attention to meIn the future, we will continue to share the advanced special knowledge points and analysis of Alibaba P7 mobile Internet architect. Your support is my biggest driving force!!

Layout detection and optimization of program performance optimization (2)

Recommended Today

Deeply analyze the usage of viewbox attribute when HTML5 uses SVG images

Quickly understand the parameters of viewbox The viewbox property is used to specify the origin and size of the coordinate system of the user’s SVG image. All the content drawn in SVG is completed relative to this coordinate system. Because the SVG canvas is infinitely extended in all directions, you can even draw graphics outside […]