android 性能优化之布局优化- 畅鱼网

布局是一个App非常关键的一部分，布局性能的好坏可直接影响到用户的体验；试想下如果一个RecyclerView滑动时异常卡顿，那用户估计也没有心情去住下滑了，可能就直接强制杀掉App了去，然后回过头去应用商店给个差评“卡的不要不要的”

虽然现在手机内存、CPU等各项性能都上来了看起来很强，实际上还是卡的不行，所以我们还是要多学习下这方面的知识

布局优化

减少布局层级

● 布局层级越高越复杂消耗性能就越大，所以在设计布局时尽量缩小布局层级数

viewgroup性能

● 常用的像LinearLayout、FrameLayout、RelativeLayout等，其中RelativeLayout消耗性能最多，所以这里能使用LinearLayout或FrameLayout的时候尽量使用这两种

● 如果2种都需要同时使用，则RelativeLayout性能会好于两种结合的布局形式

总结起来就是:

● LinearLayout = FrameLayout < RelativeLayout

● LinearLayout + FrameLayout > RelativeLayout

标签用法

● 在xml布局中，可以使用标签也可以优化布局，比如，, 以及viewstub的使用等

为什么要进行布局优化？

如果布局嵌套过深，或者其他原因导致布局渲染性能不佳，可能会导致应用卡顿

绘制优化

ondraw方法避免耗时

● 在ondraw方法中不要使用new等创建对象操作，ondraw方法会执行多次，因此会导致多次重复创建对象，占用系统资源

● 在ondraw中不要进行耗时操作，如ondraw方法名，此方法用于绘制，其他耗时操作可在其他方法中进行

PS:流畅的绘制为60fps,也就是在ondraw方法中每帧绘制不超过大概16ms左右

Android绘制原理

Android的屏幕刷新中涉及到最重要的三个概念

● CPU： 执行应用层的measure、layout、draw等操作，绘制完成后将数据提交给GPU

● GPU： 进一步处理数据，并将数据缓存起来

● 屏幕： 由一个个像素点组成，以固定的频率（16.6ms，即1秒60帧）从缓冲区中取出数据来填充像素点

总结一句话就是：CPU 绘制后提交数据、GPU 进一步处理和缓存数据、最后屏幕从缓冲区中读取数据并显示

双缓冲机制

看完上面的流程图，我们很容易想到一个问题，屏幕是以16.6ms的固定频率进行刷新的，但是我们应用层触发绘制的时机是完全随机的（比如我们随时都可以触摸屏幕触发绘制）

如果在GPU向缓冲区写入数据的同时，屏幕也在向缓冲区读取数据，会发生什么情况呢？

● 有可能屏幕上就会出现一部分是前一帧的画面，一部分是另一帧的画面，这显然是无法接受的，那怎么解决这个问题呢？

● 所以，在屏幕刷新中，Android系统引入了双缓冲机制

GPU只向Back Buffer中写入绘制数据，且GPU会定期交换Back Buffer和Frame Buffer，交换的频率也是60次/秒，这就与屏幕的刷新频率保持了同步

虽然我们引入了双缓冲机制，但是我们知道，当布局比较复杂，或设备性能较差的时候，CPU并不能保证在16.6ms内就完成绘制数据的计算，所以这里系统又做了一个处理

● 当你的应用正在往Back Buffer中填充数据时，系统会将Back Buffer锁定

● 如果到了GPU交换两个Buffer的时间点，你的应用还在往Back Buffer中填充数据，GPU会发现Back Buffer被锁定了，它会放弃这次交换

这样做的后果就是手机屏幕仍然显示原先的图像，这就是我们常常说的掉帧

布局层级优化方式

使用ConstraintLayout减少布局嵌套，层级不要太深，使用merge标签等

减少主线程布局创建时间的方式：

● 使用AsynclayoutInflater异步创建布局，这种方式是把耗时操作放到了子线程，但是会缺少TextView -> AppCompatTextView等兼容效果

● 使用纯代码的方式编写布局，new View(context)，复杂、繁琐，不好维护

● 使用第三方库如X2C等，使用xml编写布局，在编译时转成Java代码，这种方式同样缺少TextView -> AppCompatTextView等兼容效果，且有些xml属性不支持

● 使用Jetpack Compose，声明式UI，应该是未来的趋势了

● 减少过度绘制

● 减少不必要的背景设置，减少复杂shape等

自定义View的时候，使用Canvas的clipRect方法避免绘制被遮盖的内容

布局加载原理

由上面可知，导致掉帧的原因是CPU无法在16.6ms内完成绘制数据的计算；而之所以布局加载可能会导致掉帧，正是因为它在主线程上进行了耗时操作，可能导致CPU无法按时完成数据计算

布局加载主要通过setContentView来实现

● 在setContentView中主要有两个耗时操作

● 解析xml,获取XmlResourceParser,这是IO过程

● 通过createViewFromTag,创建View对象，用到了反射

以上两点就是布局加载可能导致卡顿的原因，也是布局的性能瓶颈

获取布局文件加载耗时的方法

我们如果需要优化布局卡顿问题，首先最重要的就是：确定定量标准所以我们首先介绍几种获取布局文件加载耗时的方法

布局加载慢的主要原因有两个,一个是IO,一个是反射所以我们的优化思路一般有两个

● 侧面缓解(异步加载)

● 根本解决(不需要IO,反射过程,如X2C,Anko,Compose等)

方案实操

AsyncLayoutInflater方案

AsyncLayoutInflater 是来帮助做异步加载 layout 的，inflate(int, ViewGroup, OnInflateFinishedListener) 方法运行结束之后 OnInflateFinishedListener 会在主线程回调返回 View；这样做旨在 UI 的懒加载或者对用户操作的高响应

● 简单的说我们知道默认情况下 setContentView 函数是在 UI 线程执行的，其中有一系列的耗时动作：Xml的解析、View的反射创建等过程同样是在UI线程执行的

● AsyncLayoutInflater 就是来帮我们把这些过程以异步的方式执行，保持UI线程的高响应

使用如下:

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n381" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); new AsyncLayoutInflater(AsyncLayoutActivity.this) .inflate(R.layout.async_layout, null, new AsyncLayoutInflater.OnInflateFinishedListener() { @Override public void onInflateFinished(View view, int resid, ViewGroup parent) { setContentView(view); } }); // 别的操作}</pre>

这样做的优点在于将UI加载过程迁移到了子线程，保证了UI线程的高响应缺点在于牺牲了易用性，同时如果在初始化过程中调用了UI可能会导致崩溃

X2C方案

X2C是掌阅开源的一套布局加载框架它的主要是思路是在编译期，将需要翻译的layout翻译生成对应的java文件，这样对于开发人员来说写布局还是写原来的xml，但对于程序来说，运行时加载的是对应的java文件;这就将运行时的开销转移到了编译时；如下所示

原始xml文件：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n386" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="***/apk/res/android" xmlns:app="***/apk/res-auto" xmlns:tools="***/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="10dp"> <include android:id="@+id/head" layout="@layout/head" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizOntal="true" /> <ImageView android:id="@+id/ccc" style="@style/bb" android:layout_below="@id/head" /></RelativeLayout></pre>

X2C 生成的 Java 文件

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n388" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">public class X2C_2131296281_Activity_Main implements IViewCreator { @Override public View createView(Context ctx, int layoutId) { Resources res = ctx.getResources(); RelativeLayout relativeLayout0 = new RelativeLayout(ctx); relativeLayout0.setPadding((int)(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,10,res.getDisplayMetrics())),0,0,0); View view1 =(View) new X2C_2131296283_Head().createView(ctx,0); RelativeLayout.LayoutParams layoutParam1 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT); view1.setLayoutParams(layoutParam1); relativeLayout0.addView(view1); view1.setId(R.id.head); layoutParam1.addRule(RelativeLayout.CENTER_HORIZONTAL,RelativeLayout.TRUE); ImageView imageView2 = new ImageView(ctx); RelativeLayout.LayoutParams layoutParam2 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,(int)(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,1,res.getDisplayMetrics()))); imageView2.setLayoutParams(layoutParam2); relativeLayout0.addView(imageView2); imageView2.setId(R.id.ccc); layoutParam2.addRule(RelativeLayout.BELOW,R.id.head); return relativeLayout0; }}</pre>

使用时如下所示,使用X2C.setContentView替代原始的setContentView即可

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n390" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// this.setContentView(R.layout.activity_main);X2C.setContentView(this, R.layout.activity_main);</pre>

X2C优点

● 在保留xml的同时，又解决了它带来的性能问题

● 据X2C统计，加载耗时可以缩小到原来的1/3

X2C问题

● 部分属性不能通过代码设置,Java不兼容

● 将加载时间转移到了编译期，增加了编译期耗时

● 不支持kotlin-android-extensions插件，牺牲了部分易用性

尾述

如果你对于性能问题不能由点及面逆向分析，最终找到瓶颈点和优化方法，那么必须要跟着正确的路线学习！

所以在这里分享一张由大佬收集整理的 Android 性能优化学习思维导图

并且通过这张思维导图，融合了这些年的工作经历及对网上的资料查询和整理，最终将其整合成了一份 Android 性能优化的学习手册文档 ；有需要这份 思维导图及学习手册文档的朋友：可在评论区下方留言，或者私信发送 “脑图”或 “进阶” 即可 免费获取