Android页面渲染效率优化实践

这篇具有很好参考价值的文章主要介绍了Android页面渲染效率优化实践。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Android页面渲染效率优化实践

 

1.车系页布局渲染现状 

车系页是重要的车系信息页面,更新迭代多年,页面布局不断变化,xml布局文件越写越复杂。

获取车系页布局文件耗时:

        startTime = System.currentTimeMillis();
        setContentView(R.layout.car_series_revision_activity);
        long durTime = System.currentTimeMillis() - startTime;
        LogHelper.e("布局总耗时","车系页布局耗时:" + durTime);

结果如下:

Android页面渲染效率优化实践

 

2.卡顿的原因

2.1

Android绘制原理

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

(1)CPU:执行应用层的measure、layout、draw等操作,绘制完成后将数据提交给GPU

(2)GPU:进一步处理数据,并将数据缓存起来

(3)屏幕:由一个个像素点组成,以固定的频率(16.6ms,即1秒60帧)从缓冲区中取出数据来填充像素点

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

Android页面渲染效率优化实践

► 2.双缓冲机制

Android页面渲染效率优化实践

当布局比较复杂,或设备性能较差的时候,CPU并不能保证在16.6ms内就完成绘制数据的计算,所以这里系统又做了一个处理。

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

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

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

2.2

布局加载原理

页面启动时,布局加载在主线程上进行耗时操作,会导致页面渲染及加载慢。

布局加载主要通过setContentView来实现,下面是它的调用时序图:

Android页面渲染效率优化实践

我们可以看到,在setContentView中主要有两个耗时操作:

(1)解析xml,获取XmlResourceParser,这是IO过程。

(2)通过createViewFromTag,创建View对象,用到了反射。

以上两点就是布局加载慢的原因,也是布局的性能瓶颈。

 

3.布局加载优化

上一章分析了布局加载慢的主要原因,因此,我们的优化方式主要有以下两种:

(1)异步加载,将布局加载过程转移到子线程

(2)去掉IO和反射过程

3.1

异步加载,AsyncLayoutInflater方案

 setContentView 默认是在UI主线程加载布局的,其加载过程中的耗时操作,如解析xml,反射创建view对象等也是在主线程执行,AsyncLayoutInflater 可以让这些加载过程在子线程中执行,这样可以提高UI线程的响应性,UI线程同时可以进行其他操作。AsyncLayoutInflater使用方式如下:

new AsyncLayoutInflater(this).inflate(R.layout.car_series_revision_activity, null, new AsyncLayoutInflater.OnInflateFinishedListener() {
            @Override
            public void onInflateFinished(@NonNull View view, int resid, @Nullable ViewGroup parent) {
                setContentView(view);
            }
        });

AsyncLayoutInflater方案的缺点:

(1) UI布局和view的初始化在子线程中进行,如果view还未初始化成功,在主线程中再调用view会引起崩溃。

(2) 一般情况下,主线程会调用view,涉及到大量子线程和主线程在view调用上的同步问题,这就牺牲了易用性,代码可维护性也会变差。

(3) 如果是在老页面逻辑结构上引入AsyncLayoutInflater进行改造,结构改动很大,很容易发生view调用崩溃错误,不太可行。

3.2

X2C方案

 X2C 是掌阅开源的一套布局加载框架。X2C的主要思路是利用apt工具,在编译期将我们写的xml布局文件解析成view,并根据xml动态设置view的各类属性,这样,我们在运行时,调用findViewById,根据view id拿到的view,已经是直接new 出来的view,避免了运行时的xml IO操作和反射操作,这就解决了布局时的耗时问题。

原始的xml布局文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
    <Button
        android:id="@+id/x2c"
        style="@style/btn"
        android:text="X2C" />
    <Button
        android:id="@+id/xml"
        style="@style/btn"
        android:layout_marginTop="10dp"
        android:text="XML" />
    <Button
        android:id="@+id/sub"
        style="@style/btn"
        android:layout_marginTop="10dp"
        android:text="subModule" />
</LinearLayout>
X2C 编译期apt生成的java文件:
public class X2C127_Activity implements IViewCreator {
  @Override
  public View createView(Context ctx) {
     Resources res = ctx.getResources();
        LinearLayout linearLayout0 = new LinearLayout(ctx);
        linearLayout0.setTag(R.id.x2c_rootview_width,ViewGroup.LayoutParams.MATCH_PARENT);
        linearLayout0.setTag(R.id.x2c_rootview_height,ViewGroup.LayoutParams.MATCH_PARENT);
        linearLayout0.setId(R.id.constraintLayout);
        linearLayout0.setGravity(Gravity.CENTER);
        linearLayout0.setOrientation(LinearLayout.VERTICAL);
        Button button1 = new Button(ctx);
        LinearLayout.LayoutParams layoutParam1 = new LinearLayout.LayoutParams((int)(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,150,res.getDisplayMetrics())),(int)(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50,res.getDisplayMetrics())));
        button1.setBackgroundColor(res.getColor(R.color.colorAccent));
        button1.setTextSize(TypedValue.COMPLEX_UNIT_DIP,20);
        button1.setGravity(Gravity.CENTER);
        button1.setTextColor(Color.parseColor("#ffffff"));
        button1.setId(R.id.x2c);
        button1.setText("X2C");
        button1.setLayoutParams(layoutParam1);
        linearLayout0.addView(button1);
        return linearLayout0;
  }
}

X2c的优点:

(1)易用性和可维护性好,对原有代码侵入性不强,应用代码还是使用xml写布局

(2)加载耗时可缩短到原来的1/2到1/3

X2c的缺点:

(1)View的属性支持不完全

(2)兼容性和稳定性不是很高,在高版本的gradle 编译工具,如gradle3.1.4,会出现找不到R.java文件,找不到xml对应的java文件等问题

(3)目前,X2C更新到2021年,并没有持续维护和解决issue

3.3

Compose方案

Compose 是 Jetpack 中的一个新成员,是 Android 团队在2019年I/O大会上公布的新的UI库。

Compose使用纯kotlin开发,使用简洁方便,但它是完全抛弃了View 和 ViewGroup这套系统,自己把整个的渲染机制从里到外做了个全新的,是未来取代XML的官方方案。

Compose的优点:

(1)使用声明式UI,摒弃了xml布局运行时解析,布局效率更高

(2)使用kotlin开发,简单易用,布局形式上跟flutter统一。

如果是使用kotlin开发的新项目,可以引入Compose方案,对于老项目的优化,Compose方案并不适用。

3.4

我们的优化方案-在布局反射上做文章

 Xml解析到view,完全自己来做,比较复杂且有很多风险,这个过程涉及到两个耗时的点:

(1)xml解析,IO操作

(2)反射

xml解析这部分工作复杂度很高,可以交给android系统来做。我们可以想办法去除反射的逻辑。

我们需要找到一个反射生成view的入口。我们知道,View生成相关逻辑在LayoutInflater的createViewFromTag中,调用了onCreateView(parent, name, context, attrs),通过反射生成了view。

通过android系统的LayoutInflater setFactory,我们不仅可以控制View的生成,还可以把View变成另外一个View。在setFactory的onCreateView(parent, name, context, attrs)回调中,我们接管单个view的生成,去掉反射,new 出我们自己的view就解决了问题。而onCreateView(parent, name, context, attrs)中的参数name返回的就是xml中使用到的view的名字,根据这个name,直接new出来新的view。方式如下:

        LayoutInflaterCompat.setFactory(getLayoutInflater(), new LayoutInflaterFactory() {
            @Override
            public View onCreateView(View parent, String name, Context context, AttributeSet attrs) {
                switch (name) {
                    case "TextView":
                        return new TextView(context, attrs);
                    case "ImageView":
                        return new ImageView(context, attrs);
                    case "com.cubic.choosecar.ui.car.view.NewStarView":
                        return new com.cubic.choosecar.ui.car.view.NewStarView(context, attrs);
                    case "com.cubic.choosecar.ui.carseries.scrolllayout.ScrollableLayout":
                        return new com.cubic.choosecar.ui.carseries.scrolllayout.ScrollableLayout(context, attrs);
                    case "View":
                        return new View(context, attrs);
                    case "com.cubic.choosecar.newui.carseries.view.CarRevisionSeriesImageScaleLayout": //自定义view
                        return new com.cubic.choosecar.newui.carseries.view.CarRevisionSeriesImageScaleLayout(context, attrs);
                    case "ViewStub":
                        return new ViewStub(context, attrs);
                    case "ScrollView":
                        return new ScrollView(context, attrs);
                    case "androidx.constraintlayout.widget.ConstraintLayout":
                        return new androidx.constraintlayout.widget.ConstraintLayout(context, attrs);
                    case "FrameLayout":
                        return new FrameLayout(context, attrs);
                    case "RelativeLayout":
                        return new RelativeLayout(context, attrs);
                    case "androidx.appcompat.widget.Toolbar":
                        return new androidx.appcompat.widget.Toolbar(context, attrs);
                    case "LinearLayout":
                        return new LinearLayout(context, attrs);
                    default:
                        View view = getDelegate().createView(parent, name, context, attrs);
                        return view;
                }
                //return view;
            }
        });

 

包括系统view和我们自定义的view。

此方案对已有项目的代码侵入性很小,改造成本低,兼容性也很高,相对来讲,在渲染效率上比X2C方案低一些,但比较匹配我们对已有旧项目复杂布局的渲染优化。

 

3.5

进一步在布局上优化

 我们可以使用viewStub实现布局的懒加载。思路是将布局分成不同的模块,让部分模块使用viewStub标签替代,一半屏幕的模块元素渲染完成以后,再通过viewStub来渲染生成viewStub所包含的其它模块,实现延迟渲染加载。

通过分析车系页布局,已经将布局元素,按功能做了一些模块的划分,我们进一步将关联度大的布局模块集中在一起,封装在一个自定义VIEW中,使用viewStub包含替换这些模块View。UI线程setContentView渲染布局时,viewStub所包含的模块并不会被渲染,只会渲染屏幕的部分元素,等待主接口数据返回,再使用viewStub延迟其它模块,实现了布局的懒加载,加快了主线程的渲染速度。

 

4.优化结果

通过3.4和3.5节的优化方法,车系页复杂布局渲染优化对比结果如下:

Android页面渲染效率优化实践

通过对比可以看到,在不同档次的android机型上,渲染耗时降低了20%-35%左右,在低端机型上,减少的绝对耗时更多,感受可能会明显一些。

 

作者|蒋雄锋文章来源地址https://www.toymoban.com/news/detail-413926.html

到了这里,关于Android页面渲染效率优化实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 理解React页面渲染原理,如何优化React性能?

    当使用React编写应用程序时,可以使用JSX语法来描述用户界面的结构。JSX是一种类似于HTML的语法,但实际上它是一种JavaScript的扩展,用于定义React元素。React元素描述了我们想要在界面上看到的内容和结构。 在运行React应用程序时,JSX会被转换成真实的DOM元素,这个过程主要

    2024年02月08日
    浏览(43)
  • android studio 页面布局(1)

    2023年04月24日
    浏览(77)
  • android开发实战经典,设计思想与代码质量优化+程序性能优化+开发效率优化

    一、关于Handler面试那些问题 1、Handler Looper Message 关系是什么? 2、Messagequeue 的数据结构是什么?为什么要用这个数 据结构? 3、如何在子线程中创建 Handler? 4、Handler post 方法原理? 5、Android 消息机制的原理及源码解析 6、Android Handler 消息机制 7、Android 消息机制 … 二、关于

    2024年03月11日
    浏览(104)
  • 13.108.Spark 优化、Spark优化与hive的区别、SparkSQL启动参数调优、四川任务优化实践:执行效率提升50%以上

    13.108.Spark 优化 1.1.25.Spark优化与hive的区别 1.1.26.SparkSQL启动参数调优 1.1.27.四川任务优化实践:执行效率提升50%以上 1.1.25.Spark优化与hive的区别 先理解spark与mapreduce的本质区别,算子之间(map和reduce之间多了依赖关系判断,即宽依赖和窄依赖。) 优化的思路和hive基本一致,比较

    2024年02月10日
    浏览(50)
  • H5页面秒开优化与实践

    3月份针对线上重点H5项目秒开进行治理,本文将逐步介绍如何通过H5页面的优化手段来提高 1.5 秒开率。 从用户角度看,优化能够让页面加载得更快、对用户操作响应更及时,用户体验更良好,提升用户体验和降低用户流失率非常重要。其中 Global Web Performance Matters for ecommerc

    2024年02月08日
    浏览(56)
  • Android启动优化实践

    作者:95分技术 启动优化是Android优化老生常谈的问题了。众所周知,android的启动是指用户从点击 icon 到看到首帧可交互的流程。 而启动流程 粗略的可以分为以下几个阶段 fork创建出一个新的进程 创建初始化Application类、创建四大组件等 走Application.onCreate() 创建launchActivity 走

    2024年02月09日
    浏览(42)
  • Android复杂UI的性能优化实践 - PTQBookPageView 性能优化记录

    作者:彭泰强 要做性能优化,首先得知道性能怎么度量、怎么表示。因为性能是一个很抽象的词,我们必须把它量化、可视化。那么,因为是UI组件优化,我首先选用了 GPU呈现模式分析 这一工具。 在手机上的开发者模式里可以开启 GPU呈现(渲染)模式分析 这一工具,有的

    2024年02月14日
    浏览(45)
  • Dynamic-Programming(动态规划)最细解题思路+代码详解,Android布局优化之include、merge、ViewStub的使用

    dp[0…m-1] [0] = 1; // 相当于最左面一列,机器人只能一直往下走 撸代码 三个步骤都写出来了,直接看代码 public static int uniquePaths(int m, int n) { if (m = 0 || n = 0) { return 0; } int[][] dp = new int[m][n]; // // 初始化 for(int i = 0; i m; i++){ dp[i][0] = 1; } for(int i = 0; i n; i++){ dp[0][i] = 1; } // 推导出 d

    2024年04月26日
    浏览(39)
  • 材质合批,提高模型渲染效率

      模型材质合批是一种技术手段,主要用于优化渲染性能和提高图形应用程序的帧率。它通过将多个模型的材质进行合并,从而减少渲染时的绘制调用次数。   在计算机图形学中,每个模型都有一个或多个材质,这些材质定义了模型表面的外观特性,例如纹理、颜色、光

    2024年02月07日
    浏览(39)
  • Rails 中的布局和渲染

    在 Rails 中,视图是用于呈现 HTML、XML、JSON 等响应的模板。Rails 的视图系统支持模板、局部模板和布局模板,它们分别用于分离代码、提高代码重用性和提供统一的外观。 模板是视图的基本构建块。模板可以包含 HTML、Ruby 代码和其他标记,以生成动态内容。在 Rails 中,模板

    2023年04月24日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包