APP性能优化-UI

APP性能优化-Memory

APP性能优化-稳定性(crash率)

APP性能优化-包体压缩

APP性能优化-CPU

APP性能优化-UI

APP性能优化-流畅度

影响UI性能的几个方面

1.各种布局自身性能问题，FrameLayout >LinearLayout >RelativeLayout>ConstraintLayout
2.布局层级、复杂度，合理使用布局特性减少布局层级以及复杂度
3.overdraw(过度绘制)，去除theme默认背景，减少不必要的背景设置

分析工具 ：Layout Inspector、Lint、GPU过度绘制、GPU呈现分析

布局本身性能问题

常见的六种布局:FrameLayout、RelativeLayout、LinearLayout、AbsoluteLayout、TableLayout、ConstraintLayout。AbsoluteLayout、TableLayout为针对性布局，这里不做分析。布局的绘制过程由ViewRootImp中发起，经过performTraversals->performMeasure->performLayout->performDraw,然后分发到ViewGroup以及View，性能问题主要取决于各View的onMeasure、onLayout、onDraw，写一段测试代码跟踪以上各种布局关键函数的执行步骤：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:id="@+id/main"
    android:background="@android:color/white"
    >

    <com.code.layoutanalyze.TLinearLayout
        android:layout_width="match_parent"
        android:background="@android:color/white"
        android:layout_margin="20dp"
        android:layout_height="50dp"
        ></com.code.layoutanalyze.TLinearLayout>

</FrameLayout>


public class TLinearLayout extends LinearLayout {
 ...
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        L.e(TAG,"onMeasure");
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        L.e(TAG,"onLayout");
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        L.e(TAG,"onDraw");
    }
}

依次把TLinearLayout的parent换成FrameLayout、RelativeLayout、LinearLayout、ConstraintLayout查看打印log

parent为`FrameLayout`、`LinearLayout`
2019-10-29 18:02:33.865 28124-28124/com.code.layoutanalyze E/com.code.layout:TLinearLayout: onMeasure
2019-10-29 18:02:33.895 28124-28124/com.code.layoutanalyze E/com.code.layout:TLinearLayout: onMeasure
2019-10-29 18:02:33.896 28124-28124/com.code.layoutanalyze E/com.code.layout:TLinearLayout: onLayout
2019-10-29 18:02:33.939 28124-28124/com.code.layoutanalyze E/com.code.layout:TLinearLayout: onDraw

parent为`RelativeLayout`、`ConstraintLayout`
2019-10-29 18:03:05.530 28482-28482/com.code.layoutanalyze E/com.code.layout:TLinearLayout: onMeasure
2019-10-29 18:03:05.531 28482-28482/com.code.layoutanalyze E/com.code.layout:TLinearLayout: onMeasure
2019-10-29 18:03:05.556 28482-28482/com.code.layoutanalyze E/com.code.layout:TLinearLayout: onMeasure
2019-10-29 18:03:05.557 28482-28482/com.code.layoutanalyze E/com.code.layout:TLinearLayout: onMeasure
2019-10-29 18:03:05.558 28482-28482/com.code.layoutanalyze E/com.code.layout:TLinearLayout: onLayout
2019-10-29 18:03:05.587 28482-28482/com.code.layoutanalyze E/com.code.layout:TLinearLayout: onDraw

经过代码跟踪发现再一次绘制过程中performTraversals被调用两次，直接导致onMeasure被调用两次，onLayout、onDraw会进行优化之调用了一次，具体绘制过程可以参考https://www.jianshu.com/p/733c7e9fb284

RelativeLayout、ConstraintLayout为什么onMeasure被双倍调用？

这两个布局子View存在依赖关系，都是基于相对位置的，而且子View会在横向和纵向两个方向上分布，因此，需要在横向和纵向分别进行一次measure过程。

布局自身性能结论

理论状态：在同等布局层级的情况下 FrameLayout >LinearLayout >RelativeLayout>ConstraintLayout，由于FrameLayout约束条件较少在所以会优于LinearLayout
实际状态：由于布局的层级在优先级上高于布局本身的性能，在实际开发中页面都是复杂布局，ConstraintLayout、RelativeLayout能在复杂布局中大量减少布局层级，所以FrameLayout >ConstraintLayout >RelativeLayout>LinearLayout，这也是为什么新建Activity时默认布局从原来的RelativeLayout变成了ConstraintLayout

布局层级、复杂度

尽量追求以最扁平的方式以及最少的布局个数实现想通的布局效果，合理使用布局特性减少布局层级以及复杂度。

示例1：假设如果我们要实现以下效果

image.png

使用LinearLayout

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal"
        >

        <TextView
            android:id="@+id/tx1"
            android:layout_width="50dp"
            android:layout_height="match_parent"
            android:text="1"
            android:background="@color/colorPrimary"
            android:gravity="center"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >

            <TextView
                android:id="@+id/tx2"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:text="2"
                android:layout_weight="1"
                android:background="@color/colorAccent"
                android:gravity="center"
                />

            <TextView
                android:id="@+id/tx3"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:text="3"
                android:layout_weight="1"
                android:background="@color/colorPrimaryDark"
                android:gravity="center"
                />
        </LinearLayout>
    </LinearLayout>

使用RelativeLayout

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal"
        >

        <TextView
            android:id="@+id/tx1"
            android:layout_width="50dp"
            android:layout_height="match_parent"
            android:text="1"
            android:background="@color/colorPrimary"
            android:gravity="center"
            />


        <TextView
            android:layout_toRightOf="@+id/tx1"
            android:id="@+id/tx2"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="2"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:layout_marginBottom="50dp"
            />

        <TextView
            android:layout_alignBottom="@+id/tx1"
            android:layout_toRightOf="@+id/tx1"
            android:id="@+id/tx3"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="3"
            android:layout_weight="1"
            android:background="@color/colorPrimaryDark"
            android:gravity="center"
            />
    </RelativeLayout>

RelativeLayout所需要的布局层级明显少于LinearLayout

示例2：假设如果我们要实现以下效果

image.png

实现方案一：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="20dp"
            android:text="测试测试测试"
            android:gravity="center_vertical"
            />
    </LinearLayout>

优化方案:

<TextView
        android:layout_marginTop="100dp"
        android:drawableLeft="@mipmap/ic_launcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawablePadding="20dp"
        android:text="测试测试测试"
        android:gravity="center_vertical"
        />

其它布局优化方案

image.png

1.include提高布局复用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    >
    <include layout="@layout/view_test" />
</LinearLayout>

view_test.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:src="@mipmap/ic_launcher_round"
        android:layout_height="wrap_content"
        />
    <TextView
        android:layout_width="match_parent"
        android:text="12345"
        android:layout_marginLeft="10dp"
        android:layout_height="wrap_content"
        />
</LinearLayout>

2.merage减少布局层级

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    >
    <include layout="@layout/view_test" />
</LinearLayout>

view_test.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:src="@mipmap/ic_launcher_round"
        android:layout_height="wrap_content"
        />
    <TextView
        android:layout_width="match_parent"
        android:text="12345"
        android:layout_marginLeft="10dp"
        android:layout_height="wrap_content"
        />
</merge>

3.ViewStub减少初次测量 & 绘制时间

ViewStub继承了View，它非常轻量级且宽和高都为0，因此它本身不参与任何的绘制过程，避免资源的浪费，减少渲染时间，在需要的时候才加载View。因此ViewStub的意义在于按需求加载所需的布局，在实际开发中，很多布局在正常情况下不会显示，比如加载数据暂无数据，网络异常等界面，这个时候就没必要在整个界面初始化的时候将其加载进来，通过ViewStub就可以做到在使用时在加载，提高了程序初始化时的性能

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical"
    >
    <ViewStub
        android:id="@+id/error_view"
        android:layout="@layout/view_error"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</RelativeLayout>

view_error.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:layout_centerInParent="true"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/btn_dialog"
        />
    <TextView
        android:paddingLeft="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="加载错误，请重试"
        />
</LinearLayout>

ViewStub error_view = findViewById(R.id.error_view);
error_view.inflate();//或者 error_view.setVisibility(View.VISIBLE);

image.png

overdraw(过度绘制)

过度绘制只跟重叠View的背景有关系，如果一块区域有100个View重叠但是这些View都没设置背景是不会发生overdraw的。overdraw优化方向：
1.去除theme默认背景
2.减少布局不必要的背景设置

官方对overedraw的层级定义

image.png

在实际开发中每个页面的主背景色可能都不一致，新建一个Activity时一般都会在跟布局上写上自己的颜色

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:id="@+id/main"
    android:background="@android:color/white"
    >
</LinearLayout>

设置中开启过度绘制，查看布局

image.png

只设置了一个背景，根布局为什么就已1X overdraw了？一般会在Application中设置theme,theme是有默认背景的

<application
        android:theme="@style/AppTheme"
        >
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

<style name="Base.ThemeOverlay.AppCompat.Dark" parent="Platform.ThemeOverlay.AppCompat.Dark">
        <item name="android:windowBackground">@color/background_material_dark</item>
</style>

去除theme的默认背景

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:windowBackground">@null</item>
    </style>

重新编译，查看

image.png

根布局的已经不存在overdraw了。在一个页面的根布局可能会存在很多自定义的组合控件，在这些组合控件上很多人会设置默认的颜色，这是很不好的习惯。把多个控件自定义组合起来一般是为了在多个地方复用，那每个页面的主题色有可能是不一致的，如果设置的背景色和页面主题色一致就会出现overdraw，如果不一致就需要重新设置组合控件的背景色。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:id="@+id/main"
    android:background="@android:color/white"
    >
    <com.code.layoutanalyze.TLinearLayout
        android:layout_width="match_parent"
        android:background="@android:color/white"
        android:layout_margin="20dp"
        android:layout_height="50dp"
        >
    </com.code.layoutanalyze.TLinearLayout>

</LinearLayout>

TLinearLayout是个自定义组合控件，设置了默认背景色和跟布局一致（这层背景是多余的设置），出现2X overdraw

image.png

分析工具

Layout Inspector

主要功能为能dump到其他APP的UI层级

image.png

Lint

image.png image.png

扫描出与布局相关的部分结果，以下只是Lint的冰山一角
1.paddingStart优于paddingLeft
2.marginStart优于marginLeft
3.不建议Hardcoded text内容
4.无用资源文件

GPU过度绘制

image.png

GPU呈现分析

在屏幕上显示条形图：大致显示了流畅度以及一些阈值
在adb shell dumpsys fgxinfo：通过adb命令拿到具体的量化帧率值，在后续的流畅度分析中会介绍

image.png

https://www.jianshu.com/p/642f47989c7c
https://developer.huawei.com/consumer/cn/forum/forum.php?mod=viewthread&fid=23&tid=248&extra=page%3D1