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会进行优化之调用了一次，具体绘制过程可以参考//www.greatytc.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

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 207,113评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,644评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,340评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,449评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,445评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,166评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,442评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,105评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,601评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,066评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,161评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,792评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,351评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,352评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,584评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,618评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,916评论 2赞 344