1. 启动速度优化

Flutter启动流程:

1). 一个Native进程只有一个DartVM

2). 第一个FlutterEngine初始化时，会创建并初始化DartVM

3). 一个DartVM可以有多个FlutterEngine，每个FlutterEngine都运行在自己的Isolate中，他们的内存数据不共享，需要通过Isolate事先设置的port(顶级函数)通讯。

2. 启动优化检测工具

2.1 Macrobenchmark

2.2 代码类型工具 , 无侵入性

使用App Startup

App Startup库提供了一种在应用启动时初始化组件的简单而高效的方法。库开发者和应用开发者都可以使用应用启动来简化启动序列，并明确设置初始化顺序。

通过应用启动，您可以定义共用单个 Content Provider 的组件初始化程序，而无需为需要初始化的每个组件定义单独的 Content Provider。这可以显著缩短应用启动时间。

  implementation "androidx.startup:startup-runtime:1.1.1"

class TimberInitializer : Initializer<String> {
   //create() 方法，其中包含初始化组件并返回 T 实例的所有必要操作。
    override fun create(context: Context): String {
        Timber.plant(Timber.DebugTree())
        return "TimberInit"
    }
//dependencies() 方法，该方法返回初始化程序所依赖的其他 Initializer<T> 对象的列表。您可以使用此方法控制应用在启动时的顺序。
    override fun dependencies(): List<Class<out Initializer<*>>> {
     // No dependencies on other libraries.
        return emptyList()
    }
}

调用
AppInitializer.getInstance(context)
    .initializeComponent(ExampleLoggerInitializer::class.java)

3. 启动优化方案

3.1 Flutter 引擎预加载

使用场景:

Native和Flutter混合开发，通过FlutterFragment加载Flutter页面，但Flutter页面第一次加载时非常缓慢，可以通过Flutter预加载的方式来减少第一次加载的耗时。

使用它可以达到页面秒开的一个效果，具体实现为：

在 HIFlutterCacheManager 类中定义一个 preLoad 方法，使用 Looper.myQueue().addIdleHandler 添加一个 idelHandler，当 CPU 空闲时会回调 queueIdle 方法，在这个方法里，你就可以去初始化 FlutterEngine，并把它缓存到集合中。

预加载完成之后，你就可以通过 HIFlutterCacheManager 类的 getCachedFlutterEngine 方法从集合中获取到缓存好的引擎。

import android.content.Context;
import android.os.Looper;
import android.os.MessageQueue;

import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.embedding.engine.FlutterEngineCache;
import io.flutter.embedding.engine.dart.DartExecutor;
import io.flutter.embedding.engine.loader.FlutterLoader;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class FlutterHelper {

    private FlutterHelper() {
    }

    //FlutterEngine缓存的key
    public static final String FLUTTER_ENGINE = "flutter_engine";

    //flutter初始化成功的消息
    public static final String FLUTTER_ENGINE_INIT_FINISH = "flutter_engine_init_finish";

    private static volatile FlutterHelper instance;

    public static FlutterHelper getInstance() {
        if (instance == null) {
            synchronized (FlutterHelper.class) {
                if (instance == null) {
                    instance = new FlutterHelper();
                }
            }
        }
        return instance;
    }

    public void preloadFlutterEngine(Context context) {
        Looper.myQueue().addIdleHandler(new MessageQueue.IdleHandler() {
            @Override
            public boolean queueIdle() {
                initFlutterEngine(context);
                return true;
            }
        });
    }

    public synchronized FlutterEngine initFlutterEngine(Context context){
        if (!FlutterEngineCache.getInstance().contains(FLUTTER_ENGINE)) {
        //这里建议用FlutterEngineGroup来创建FlutterEngine
            FlutterEngine engine = new FlutterEngine(context.getApplicationContext());
            System.out.println("flutterEngine:"+engine);
            GeneratedPluginRegistrant.registerWith(engine);
            //Channel 注册要紧跟引擎初始化之后，否则会有在dart中调用 Channel 因为还未初始化完成而导致的时序问题
            //FlutterBridge用于将Channel封装，统一提供服务
            FlutterBridge.init(engine);
            engine.getDartExecutor().executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault());
            FlutterEngineCache.getInstance().put(FLUTTER_ENGINE, engine);
            return engine;
        } else {
            return getFlutterEngine();
        }
    }

    public FlutterEngine getFlutterEngine(){
        if (isInitFinish()) {
            return FlutterEngineCache.getInstance().get(FLUTTER_ENGINE);
        } else {
            try {
                throw new Exception("请先初始化 FlutterEngine！");
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return null;
    }

    public boolean isInitFinish() {
        return FlutterEngineCache.getInstance().get(FLUTTER_ENGINE) != null;
    }

}

3.2 Dart VM 预热

对于 Native + Flutter 的混合场景，如果不想使用引擎预加载的方式，那么要提升 Flutter 的启动速度也可以通过Dart VM 预热来完成，这种方式会提升一定的 Flutter 引擎加载速度，但整体对启动速度的提升没有预加载引擎提升的那么多。

无论是引擎预加载还是 Dart VM 预热都是有一定的内存成本的，如果 App 内存压力不大，并且预判用户接下来会访问 Flutter 业务，那么使用这个优化就能带来很好的价值；反之，则可能造成资源浪费，意义不大。

3.3 避免启动初始化过多耗时任务（分块加载初始化）

eg：网络初始化可以放在闪屏页面，和用户强关联的模块、sdk可以放在登录之后操作。

3.4 页面启动耗时避免initState方法里面做。

任务放在状态管理机制里面处理，页面启动“友好交互”原则（加载动画、或先展示旧数据等新数据处理完成之后再刷新）

3.5 页面build里面有耗时操作

我们应该尽量避免在 build() 中执行耗时操作，因为 build() 会被频繁地调用，尤其是当 Widget 重建的时候。

此外，我们不要在代码中进行阻塞式操作，可以将文件读取、数据库操作、网络请求等通过 Future 来转换成异步方式来完成。

最后，对于 CPU 计算频繁的操作，例如图片压缩，可以使用 isolate 来充分利用多核心 CPU。

4. 渲染优化

我们可知 Flutter 的主要渲染流程：在初次渲染时，我们会根据我们自己的业务代码，分别构建 Widget、 Element 以及 RenderObject 三棵树，其次对 RenderObjective Tree 的每个节点进行遍历，再对发生改变的节点处进行标脏处理，执行 paint 操作，形成一个 Layer Tree，最后把形成好的 Layer Tree 发送给 GPU 线程，GPU 线程在接收到 Layer Tree 之后，将 Layer Tree 转成为 GPU 的可执行指令

我们可知 Flutter 在 UI 线程中渲染主要涉及到 build、 layout 以及 paint 阶段

4.1 build优化方案:

在我们业务开发中，我们遵循以下方法，可以有效的控制 build 的耗时：

在创建 build 时，我们得让 build 十分纯粹，不能有其他的副作用。 (降低我们开始遍历的节点)

2.尽量避免写出嵌套很深的 Widget，应该把他们一个一个独立出来，这样可以有效地降低我们开始遍历的节点。(提前结束树的遍历)

4.2 layout 阶段的性能优化

layout 的过程主要是为了计算出节点真正所占的大小。在建立 layout tree 的过程中，首先父节点会给出一个宽高大小的限制，然后子节点再来决定自己的大小。在 Layout 中存在一个 Relayout boundary 的概念，它可以产生一个边界，确保在边界内的布局发生改变时，不会让边界外的部分也重新计算，这样也可以在某些特定情况下提高我们应用的性能。除此之外，在我们书写 Widget 的时候，如果能够给出 Widget 宽高的话，尽量给出来，因为在布局中，宽度的计算也会占用一定的时间。比如在使用 ListView 这样的滑动组件时，我们应该给出滑块的高度，即 itemExtend 的值，这样在滑动的时候，UI 线程不会花费大量的时间在计算高度上。

class ListViewShow extends StatelessWidget {
  const ListViewShow({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      itemExtent: 30, // 指定 children 每一个 child 的高度
      children: <Widget>[
        Container(
          child: Text('ListView 1'),
        ),
        Container(
          child: Text('ListView 2'),
        ),
        Container(
          child: Text('ListView 3'),
        ),
      ],
    );
  }
}

4.3 paint 阶段的性能优化

在 RenderObject 标脏后，paint 会对已经标脏的 RenderObject 图层重新进行绘制。这里和 Layout 相似，存在一个 Repaint boundary 的概念，它的原理和 layout 里面的 Relayout boundary 的基本相似，区别是它在 paint 的时候产生一个边界，防止页面大范围重新绘制。如果页面是频繁更新的页面，例如包含定时器的页面，在使用倒计时这样的控件时，我们可以在最小控件范围外包一层 RepaintBoundary 来与周围图层进行隔离。同 build 阶段一样，我们可以在代码里面加入debugProfilePaintsEnabled = true来在 timeline 里面观看 paint 阶段有哪些不必要的图层发生了更新

import 'package:flutter/material.dart';
import 'dart:async';

class HoursTitle extends StatefulWidget {
  @override
  HoursTitleState createState() => HoursTitleState();
}

class HoursTitleState extends State<HoursTitle> {
  static Timer timer;
  int minutes = DateTime.now().minute;
  int seconds = DateTime.now().second;
  Duration duration = Duration(seconds: 1);

  void _startTimer() {
    timer?.cancel();
    timer = Timer.periodic(duration, (timer) {
      if (seconds == 0) {
        if (minutes == 0) {
          minutes = 59;
          seconds = 59;
        } else {
          minutes--;
          seconds = 59;
        }
      } else {
        seconds--;
      }
      setState(() {
        minutes = minutes;
        seconds = seconds;
      });
    });
  }

  @override
  void initState() {
    super.initState();
    if (!mounted) {
      return;
    }
    _startTimer();
  }

  @override
  void dispose() {
    super.dispose();
    timer?.cancel();
  }

  Widget build(BuildContext context) {
    // 通过RepaintBoundary增加一个绘制边界
    return Container(
      child: Row(
        children: [
          RepaintBoundary(
            child: Container(
              width: 200,
              height: 30,
              child: Text.rich(
                TextSpan(
                  text: '距本小时结束',
                  children: [
                    TextSpan(
                      text: '$minutes : $seconds',
                    ),
                  ],
                ),
              ),
            ),
          ),
          Text('123'),
          Text('465'),
        ],
      ),
    );
  }
}

👀关注公众号：Android老皮！！！欢迎大家来找我探讨交流👀

遥遥领先Flutter性能优化系列|一文教你完全掌握启动速度&&渲染优化