Android高级开发-布局渲染流程与优化

扩展知识

CPU(中央处理器)与GPU(图像处理器)

主要是设计目标不一样，针对不一样的应用场景。多缓存多分支，适用于复杂的逻辑运算,主要负责Measure，Layout，Record，Execute的计算操做。

CPU擅长逻辑控制和通用类型数据运算。CPU的运算速度取决于请了多么厉害的教授，教授处理复杂任务的能力高，但简单重复的任务，仍是人多快。众核少缓存,适用于结构单一的数据处理,主要负责Rasterization(栅格化)操做。

GPU擅长大规模并发计算。GPU的运算速度取决于雇了多少小学生。

绿色的是计算单元，橙红色的是存储单元，橙黄色的是控制单元。

屏幕上显示的文字、图像等，都是经过屏幕上的像素点显示颜色来完成的。

Resterization栅格化是绘制那些Button，Shape，Path，String，Bitmap等组件最基础的操做。它把那些组件拆分到不一样的像素上进行显示。这是一个很费时的操做，GPU的引入就是为了加快栅格化的操做。

CPU负责把UI组件计算成Polygons，Texture纹理，而后交给GPU进行栅格化渲染。 整个流程以下

FPS (Frames Per Second)每秒帧数 60FPS 用户看的话以为动做是连续的，至少是每秒10-12帧的速度，而想达到流畅的效果，至少须要每秒24帧。这也是为何电影片源一般都是24帧的缘由。若是和手机交互，如触摸和反馈，低于60FPS会感受卡顿，60FPS是最佳流畅度。

为了保证用户的视觉效果，因此Android系统每隔16ms(1000ms/60fps)发出VSYNC信号，触发对UI渲染。

若是渲染操做超过了16ms，那么用户在16ms * 2 看到的2帧画面相同，感受界面卡顿，即丢帧现象。

卡顿分析(16ms主要作两件事)

1. 将UI对象转换成Polygons，Texture纹理。(LayoutInflater将XML转换成JAVA对象给CPU)
2. CPU传递数据给GPU、GPU进行绘制。

布局优化

1. 减小布局元素的层级嵌套，删除多余布局。或更改布局组件。如使用ContraintLayout。(减小转换对象的时间)
2. 减小布局中的背景。(减小GPU重复绘制)
3. 自定义View是否进行裁剪。(减小GPU重复绘制)

public class ClipView extends View {

    Card[] cards;
    Paint paint;

    ......

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Card card;
        Bitmap bitmap;
        for (int i = 0; i < cards.length - 1; i++) {
            card = cards[i];
            bitmap = BitmapFactory.decodeResource(getResources(), card.resId);
            canvas.drawBitmap(bitmap, card.x, 0, paint);
//            drawCards(canvas, bitmap, card.x, cards[i + 1].x);
        }

        card = cards[cards.length - 1];
        bitmap = BitmapFactory.decodeResource(getResources(), card.resId);
        canvas.drawBitmap(bitmap, card.x, 0, paint);
    }

    private void drawCards(Canvas canvas, Bitmap bitmap, int s, int e) {
        canvas.save();
        canvas.clipRect(s, 0, e, bitmap.getHeight());
        canvas.drawBitmap(bitmap, s, 0, paint);
        canvas.restore();
    }
}

复制代码

<?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"
    android:gravity="center">
    <com.outman.example.androidtest.clip.ClipView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#0000ff"
        android:layout_margin="10dp"/>
</LinearLayout>
复制代码

参考 www.jianshu.com/p/26000db61…