美文网首页
二、布局渲染流程

二、布局渲染流程

作者: Serenity那年 | 来源:发表于2018-10-28 21:26 被阅读5次

1.将xml文件中的标签转换为显示的图形?
首先通过LayoutInflate将标签(比如一个Button)加载到内存中,这样内存中就存在一个Button对象,这个对象里面含有left,top,right,bottom,height,width等信息;然后,经过CPU计算,将这个对象对象处理成多维向量图形,然后再将这个多维的向量图形交给GPU负责像素填充,通过栅格化,GPU将图形绘制出来;
栅格化:将向量图形格式表示的图像转换成位图,然后用以显示器;


加载xml流程.png

2.UI界面卡顿原理分析?
当某一帧画面的渲染时间超过16ms的时候,垂直同步机制就会让显示器硬件同步等待GPU完成这一帧的栅格化渲染操作,这样就会使上一帧画面多停留16ms,甚至更多,这样就会少于60帧,就会让用户感到画面卡顿;

3.60Hz刷新频率的由来?
在与手机的交互的过程中,如果触摸和反馈在60帧以下,人是能感觉出来的,60帧以上人是不能感觉出变化的;1000/60 = 16.66ms;

4.16ms的时间主要做的事情?
第一件:将UI对象转换为一系列的多边形和纹理;
第二件:CPU传递数据到GPU;
所以,我们要缩短这两部分时间,也就是说需要尽量减少对象的转换次数和上传数据的次数;
如何减少上面两部分的时间,以至于在16ms完成呢?
一是CPU减小xml转换成UI对象的时间(通过Hierarchy View工具分析);
二是GPU减少重复绘制的次数(请看第5点解决方案);

5.GPU过度绘制
GPU的绘制就和刷墙一样的,一层层的进行,16ms刷一次,这样会造成图层的覆盖现象,即无用的图层还是被绘制到底层,造成不必要的绘制;
过度绘制有两种情况:
一是:在自定义控件中的onDraw方法中,进行了过度绘制;
二是:布局层次太深,重叠性太强;用户看不到的区域GPU
也会渲染,导致耗时增加;
以上两种情况减少了GPU重复绘制次数的情况

6.怎么减少过度绘制?

由于不同的页面要设置使用不同的背景颜色,但是Theme中默认使用了一个windowBackground,这样就会造成背景的二次绘制,为了防止二次绘制,我们有两种方式(除了不设置背景颜色):
一是:在当前的页面的onCreate方法的setContentView方法之前,使用getWindow().setBackgroundDrawable(null);来去除主题中默认的background;这样做只对设置的单个页面起作用,需要在每个页面都设置,不太方便;
二是:在styles.xml中app使用的主题中加个item,将android:windowBackground设置为null,这样设置,是对整个app起作用的;QQ就是使用此种方式防止背景重复绘制;

7.能使用include标签就使用,因为使用include标签后,cpu只需要计算上传一次纹理到GPU,后期再有布局使用include标签引入布局,CPU就不需要再次计算纹理上传到GPU,而是第一次上传后GPU进行缓存,提升绘制性能;如果不使用include标签,而是在每个页面写重复布局,相当于每个页面都不一样,都要重新上传纹理到GPU;

相关文章

  • 二、布局渲染流程

    1.将xml文件中的标签转换为显示的图形?首先通过LayoutInflate将标签(比如一个Button)加载到内...

  • 21 | 除了 Cocoa,iOS还可以用哪些 GUI 框架开发

    渲染流程GUI 框架中的渲染,一般都会经过布局、渲染、合成这三个阶段。

  • 布局渲染流程与原理

    60HzAndroid系统每隔16ms发出VSYNC信号,出发对UI进行渲染 1、将UI对象转换成多边形和纹理2、...

  • AndroidUI布局优化

    XML布局显示到屏幕流程 Android系统每隔16ms发出VSYNC信号,触发对UI进行渲染,如果每次渲染都成功...

  • OSG3.4内置Examples解析【目录】

    opengl渲染管线 从整体上解读OpenGL的渲染流程 一 从整体上解读OpenGL的渲染流程 二 osg与an...

  • Android 上屏原理

    为了方便理解核心原理,以下流程均已精简。 一. 完整流程 流程图: 上图是 Android 将一个布局通过硬件渲染...

  • 2.1 布局渲染流程与原理

    GPU GPU用途是将计算机系统所需要的显示信息进行转换驱动,并向显示器提供行扫描信号,控制显示器的正确显示,是连...

  • 浏览器渲染流程

    渲染流程: 构建 DOM 树、样式计算、布局阶段、分层、绘制、光栅化 和 合成。 构建 DOM 树 这是因为浏览...

  • (二)OpenGL渲染流程

    图像顶点数据到显示结果有几个大体的过程 顶点数据:buffer是放置数据的地方,老外起的名字 顶点着色器:顶点数据...

  • 四、离屏渲染

    离屏渲染与正常渲染 屏幕上最终显示的数据有两种加载流程 正常渲染加载流程 离屏渲染加载流程离屏渲染与正常渲染 常⻅...

网友评论

      本文标题:二、布局渲染流程

      本文链接:https://www.haomeiwen.com/subject/ouizaftx.html