美文网首页
UI渲染流程布局优化

UI渲染流程布局优化

作者: xyzkaye | 来源:发表于2023-02-22 15:49 被阅读0次

    CPU与GPU

    CPU作为 “中央处理器”,除了要负责逻辑计算外,还需要做内存管理,显示操作,因此随着各种复杂App的出现,其实际运算的性能会大打折扣。
    设计原由:为了提高图形显示效率以及复杂的图形,设计出了GPU。
    主要功能:为了帮助CPU分担图形显示

    cpu_gpu.png

    蓝色的Control为控制器,用于协调控制整个CPU的运行,包括取出指令,控制其他模块的运行等;
    绿色的ALU (Arithmetic Logic Unit) 为算术逻辑单元,用于数学以及逻辑运算;
    橙色的Cache和DRAM分别为缓存和RAM,用户存储信息;
    注:CPU控制器比较复杂,ALU数量较少。因此CPU接长各种复杂的逻辑运算,但不擅长数学尤其是浮点运算;

    XML布局显示至屏幕流程
    1. <Button width="">;
    2. LayoutInflater加载进内存中;
    3. CPU计算,处理成位图;
    4. CPU将图形交给GPU;
    5. GPU对图形进行栅格化;
    6. 交由显示器显示;
    PFS

    12 fps:画面帧率高于每秒约10-12帧时,眼睛会认为它是连贯的;
    24fps:有声电影拍摄一般为每秒24帧;
    30 fps:早期动态电子游戏,一般会在每秒30帧左右;
    60 fps:手机交互过程中,需要触摸和反馈,需要60帧才能达到不卡顿的效果;
    android系统每隔16ms就要发送次YNC信号 >>>1000/60 约=16

    优化目标
    • CPU减少XML转换成对象的时间
    • GPU减少重复绘制
    过度绘制

    GPU每隔16ms画一次,如果CPU传递过来的图形有重复的位置,会造成用户只能看到顶层画面,而底层画面则被遮盖,底层部分的绘制虽然用户无法看到,但同样也占据了计算资源,造成了不必要的浪费;这种情况就叫过度绘制;

    检测通过开发者工具中开启是否过度绘制

    解决方案
    • 布局中的背景是否需要;
    • 是否可以删除多余布局;
    • 自定义view是否进行了相应的裁剪;
    • 布局是否够扁平化;
    • 使用Merge标签排除多余一层ViewGroup容器;
    • 使用Viewstub进行布局的懒加载;

    相关文章

      网友评论

          本文标题:UI渲染流程布局优化

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