一： 概述

学Flutter印象最深的一句话是：万物皆Widget。 但Widget是不可变的，页面发生变化时，Widget一定会被重新构建。 在我们理解中对象的创建带来的性能损耗是非常巨大的，这与Flutter宣传的高性能不符合。这其中的缘由是，Widget并不是“逻辑处理”与“视图渲染”对象，它是一个非常轻量级的描述类。 因此Widget的批量创建销毁对Flutter的性能损耗是非常小的。

Flutter会根据Widget创建出唯一的Element，然后会创建出一个继承自Element的唯一RenderObjet。Widget负责页面描述，Element负责信息存储和中枢调度，RenderObjet是真正的绘制实例。 由于他们结构类似于HTML中的DOM树，因此形象的将其称为Flutter的三棵树。

二： 启动流程图

本文将从源码解析Flutter的启动流程，顺便标记三棵树的创建时机。源码均复制自 Stable 1.17.5, 非核心代码有删减。下图是我根据源码调用顺序绘制的简单流程图。

三： 启动详细流程

3.1 main

void main() => runApp(MyApp());

3.2 runApp

[flutter/lib/src/widgets/binding.dart]

/// 把传入 widget 充满全屏
///
/// 传入的 widget 会被强制充满全屏，若想调整 widget 对齐方式，可考虑[Align]、[Center]等
///
/// 再次调用[runApp]将会把屏幕之前的root widget替换为传入的widget。
/// 新的 widget 树会与之前的 widget树进行比较，任何差异都会被应用到底层的渲染树上
/// 类似于调用 [State.setState] 后 [StatefulWidget] 重新构建
///
/// 如果需要，使用[WidgetsFlutterBinding]初始化绑定。
///
/// 参见:
///
///  * [WidgetsBinding.attachRootWidget], widget 结构创建根 widget
///  * [RenderObjectToWidgetAdapter.attachToRenderTree], 元素结构创建根元素。
///  * [WidgetsBinding.handleBeginFrame], _transientCallbacks 的函数回调
///     以确保小部件、元素和渲染树都构建好了。
void runApp(Widget app) {
  WidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
}

从这里可大致推测出，runApp做了三件事：

• 初始化 WidgetsFlutterBinding
• 将界面App加载到 flutter 树中
• 计算面积，开始绘制

3.3 ensureInitialized

[flutter/lib/src/widgets/binding.dart]

/// 给程序做一个功能集的绑定
///
/// 粘合framework 和 引擎层的胶水
class WidgetsFlutterBinding extends BindingBase with GestureBinding, ServicesBinding, SchedulerBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding {
  static WidgetsBinding ensureInitialized() {
    if (WidgetsBinding.instance == null)
      WidgetsFlutterBinding();
    return WidgetsBinding.instance;
  }
}

这是一个功能集（flutter使用 mixin语法，实现多继承的效果）包含：

• GestureBinding：提供了window.onPointerDataPacket 回调，绑定Framework手势子系统，是Framework事件模型与底层事件的绑定入口。
• ServicesBinding：提供了window.onPlatformMessage 回调， 用于绑定平台消息通道（message channel），主要处理原生和Flutter通信。
• SchedulerBinding：提供了window.onBeginFrame和window.onDrawFrame回调，监听刷新事件，绑定Framework绘制调度子系统。
• PaintingBinding：绑定绘制库，主要用于处理图片缓存。
• SemanticsBinding：语义化层与Flutter engine的桥梁，主要是辅助功能的底层支持。
• RendererBinding: 提供了window.onMetricsChanged 、window.onTextScaleFactorChanged 等回调。它是渲染树与Flutter engine的桥梁。
• WidgetsBinding：提供了window.onLocaleChanged、onBuildScheduled 等回调。它是Flutter widget层与engine的桥梁。

3.4 scheduleAttachRootWidget

[flutter/lib/src/widgets/binding.dart]

/// 生成一个计时器，同时附加到根 widget 上.
///
/// [runApp]时配置，若是想同步构建 widget 树，需使用[attachRootWidget]
void scheduleAttachRootWidget(Widget rootWidget) {
  Timer.run(() {
    attachRootWidget(rootWidget);
  });
}

3.4.1 attachRootWidget

[flutter/lib/src/widgets/binding.dart]

/// 将 widget 附加到 [renderViewElement]上（renderViewElement 是 Element 树的根元素）
///
/// [runApp] 时配置生成 widget 树
///
/// 参见： [RenderObjectToWidgetAdapter.attachToRenderTree].
void attachRootWidget(Widget rootWidget) {
  //构造了一个RenderObjectToWidgetAdapter实例，它继承于Widget，所以它本质就是Widget。然后我们写的Widget（也就是rootWidget变量）作为child参数传进去，而Render树的根结点RenderView也作为container参数传进去。
  //它就是我们Widget树的根结点，我们写的Widget就是挂在它下面，它对应的RenderObject就是RenderView。

  // _renderViewElement是element的根树，首次调用[runApp]时初始化
  _renderViewElement = RenderObjectToWidgetAdapter<RenderBox>(
    container: renderView,
    debugShortDescription: '[root]',
    child: rootWidget,
  ).attachToRenderTree(buildOwner, renderViewElement);
  // buildOwner负责管理 Widget 树的构建 
  // 初始化[_buildOwner]必须在[initInstances]方法中完成，
  // 因为它需要 [ServicesBinding] 设置 [defaultBinaryMessenger] 实例。
}

3.4.2 attachToRenderTree

[flutter/lib/src/widgets/binding.dart]

  /// 将当前 widget 充满屏幕，返回 element 会作为 [Element] 树的子树
  ///
  /// If `element` is null, 该方法会创建一个 element . else 传入 element 将有会替换该 widget。
  ///
  /// 用于[runApp]引导应用程序
  RenderObjectToWidgetElement<T> attachToRenderTree(BuildOwner owner, [ RenderObjectToWidgetElement<T> element ]) {
    if (element == null) {
      owner.lockState(() {   //lockState，在下面代码执行过程中，禁止调用setState方法
        element = createElement(); //
        element.assignOwner(owner);
      });
      owner.buildScope(element, () {
        element.mount(null, null);
      });
      // This is most likely the first time the framework is ready to produce
      // a frame. Ensure that we are asked for one.
      SchedulerBinding.instance.ensureVisualUpdate();
    } else {
      element._newWidget = this;
      element.markNeedsBuild();
    }
    return element;
  }

3.4.2.1 createElement

@override
RenderObjectToWidgetElement<T> createElement() => RenderObjectToWidgetElement<T>(this);

  /// 创建 [RenderObject]托管的 节点
  ///
  /// 创建的[RenderObject]不会添加到 render 树中，需要调用  
  ///[RenderObjectToWidgetAdapter.attachToRenderTree] 添加
  RenderObjectToWidgetElement(RenderObjectToWidgetAdapter<T> widget) : super(widget);

3.4.2.2 buildScope

[flutter/lib/src/widgets/framework.dart]

/// 为更新的 widget 树建立一个作用域，并调用给定的' callback '(如果有的话)
/// 然后，使用 [scheduleBuildFor] 按深度顺序构建所有标记为dirty的元素
///
/// 这种机制可以防止构建方法过渡性地要求其他构建方法运行，从而可能导致无限循环
///
/// 脏列表在`callback'返回之后被处理，并使用[scheduleBuildFor]按深度顺序构建所有标记为脏的元素
/// 如果在此方法运行时将元素标记为脏元素，则此元素必须比“ context”节点深，并且比任何先前构建的节点深
///

/// 要在不执行任何其他工作的情况下刷新当前脏列表，可以调用此函数而无需回调
/// framework会在每帧绘制中调用 [WidgetsBinding.drawFrame]
///
/// 一次只能激活一个[buildScope]。
///
/// 每个[buildScope]都有各自的[lockState]作用域。
///
/// 若想在每次调用此方法时打印控制台消息，将[debugPrintBuildScope]设置为true。
/// 该方法在调试 widgets 未被标记为dirty或过于频繁地被标记为dirty的问题时非常有用。
void buildScope(Element context, [ VoidCallback callback ]) {
    if (callback == null && _dirtyElements.isEmpty)
        return;
    Timeline.startSync('Build', arguments: timelineWhitelistArguments);
    try {
        _scheduledFlushDirtyElements = true;
        if (callback != null) {
            Element debugPreviousBuildTarget;
            _dirtyElementsNeedsResorting = false;
            try {
                callback(); //回调mount()
            }
            ...
        }
        _dirtyElements.sort(Element._sort);
        _dirtyElementsNeedsResorting = false;
        int dirtyCount = _dirtyElements.length;
        int index = 0;
        while (index < dirtyCount) {
            try {
                _dirtyElements[index].rebuild(); //针对脏元素执行rebuild操作
            }
            ...
        }
    } finally {
        ...
        Timeline.finishSync();
    }
}

3.4.2.3 mount

[flutter/lib/src/widgets/binding.dart]

@override
void mount(Element parent, dynamic newSlot) {
  super.mount(parent, newSlot);
  _rebuild();
}

3.4.2.3.1 mount

[flutter/lib/src/widgets/framework.dart]

/// 将这个元素添加到给定父节点的给定位置中。
///
/// 首次将新创建的元素添加到树时，framework 调用此函数。使用此方法初始化依赖于拥有父类的状态。
/// 独立于父类的 State 更容易在构造函数中初始化。
///
/// 此方法将元素从“initial(初始)” 生命周期状态转换为 “active (活动)” 生命周期状态。
///
/// 重写此方法的子类可能也要重写[update], [visitChildren], 
/// [RenderObjectElement.insertRenderObjectChild],
/// [RenderObjectElement.moveRenderObjectChild], 
/// [RenderObjectElement.removeRenderObjectChild].
@mustCallSuper
void mount(Element parent, dynamic newSlot) {
  _parent = parent;
  _slot = newSlot;
  _depth = _parent != null ? _parent.depth + 1 : 1;
  _active = true;
  if (parent != null) // Only assign ownership if the parent is non-null
    _owner = parent.owner;
  final Key key = widget.key;
  if (key is GlobalKey) {
    key._register(this);
  }
  _updateInheritance();
}

3.4.2.3.2 mount

[flutter/lib/src/widgets/framework.dart]

/// 实现类重写mount
  @override
  void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    _renderObject = widget.createRenderObject(this);//通过Elemet生成 RenderObject树
    attachRenderObject(newSlot);
    _dirty = false;
  }

3.4.2.4 _rebuild

[flutter/lib/src/widgets/binding.dart]

void _rebuild() {
  try {
    _child = updateChild(_child, widget.child, _rootChildSlot);
  } catch (exception, stack) {
    final FlutterErrorDetails details = FlutterErrorDetails(
      exception: exception,
      stack: stack,
      library: 'widgets library',
      context: ErrorDescription('attaching to the render tree'),
    );
    FlutterError.reportError(details);
    final Widget error = ErrorWidget.builder(details);
    _child = updateChild(null, error, _rootChildSlot);
  }
}

3.4.2.5 updateChild

[flutter/lib/src/widgets/framework.dart]

/// 用给定的新配置更新给定的子节点。
///
/// 此方法是 widgets 系统的核心。每次根据更新后的配置 “添加”、“更新”、“删除子节点”时都会调用它。
///
/// `newSlot`参数指定此元素的 [slot](节点槽点) 的新值。
///
/// 若`child`为null，而`newWidget`不为null，则需要为其创建一个新元素，
/// 并使用newWidget配置一个[Element]。
///
/// 若`newWidget`为null，而`child`不为null，则需将其删除，因为它没有配置信息了。
///
/// 若两个值都不为 null，则需要将 'child' 的配置更新为 'newWidget' 提供的新配置。
/// 如果可以将“ newWidget”提供给现有的子节点（由[Widget.canUpdate]确定），则将其给定。
/// 否则，需要丢弃旧的子节点，并为新配置创建一个新的子节点。
///
/// 如果两者都为null，则说明没有也不会有子节点了，因此啥也不干
///
/// [updateChild]方法如果必须创建一个子节点，则返回一个新的子节点；
/// 如果必须更新子节点，则返回传入的子节点；如果必须删除该子节点而没替换它，则返回null。 
///
/// 下面的表格总结了上面的内容:
///
/// |                     | **newWidget == null**  | **newWidget != null**   |
/// | :-----------------: | :--------------------- | :---------------------- |
/// |  **child == null**  |  Returns null.         |  Returns new [Element]. |
/// |  **child != null**  |  删除Old child, returns null. | 如果可能的话更新Old child，返回child或新的 [Element]. |

@protected
Element updateChild(Element child, Widget newWidget, dynamic newSlot) {
  if (newWidget == null) {
    if (child != null)
      deactivateChild(child);
    return null;
  }
  Element newChild;
  if (child != null) {
    bool hasSameSuperclass = true;
    if (hasSameSuperclass && child.widget == newWidget) {
      if (child.slot != newSlot)
        updateSlotForChild(child, newSlot);
      newChild = child;
    } else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)) {
      if (child.slot != newSlot)
        updateSlotForChild(child, newSlot);
      child.update(newWidget);
      newChild = child;
    } else {
      deactivateChild(child);
      newChild = inflateWidget(newWidget, newSlot);
    }
  } else {
    newChild = inflateWidget(newWidget, newSlot);
  }
  return newChild;
}

3.5.scheduleWarmUpFrame

[flutter/lib/src/widgets/binding.dart]

/// 尽可能快的帧绘制，并非等待Vsync信号的响应
///
/// 在程序启动时使用，以便第一帧绘制能额外获得几毫秒
///
/// 锁定事件调度，直至此帧绘制完成 
///
/// 若提前执行了 [scheduleFrame] 或 [scheduleForcedFrame]，它会延时执行 
///
/// 若别的帧绘制调度已开始，或别的地方调用了[scheduleWarmUpFrame] 则此方法不会执行
///
/// 更推荐 [scheduleFrame] 来更新试图
void scheduleWarmUpFrame() {
  if (_warmUpFrame || schedulerPhase != SchedulerPhase.idle)
    return;
  _warmUpFrame = true;
  Timeline.startSync('Warm-up frame');
  final bool hadScheduledFrame = _hasScheduledFrame;
  Timer.run(() {
    handleBeginFrame(null);
  });
  Timer.run(() {
    handleDrawFrame();//
    resetEpoch();// 重置时间
    _warmUpFrame = false;
    if (hadScheduledFrame)
      scheduleFrame();
  });
  // 事件锁定
  lockEvents(() async {
    await endOfFrame;
    Timeline.finishSync();
  });
}

3.5.1. handleBeginFrame

[flutter/lib/src/widgets/binding.dart]

/// 由引擎调用以准备 framework 生成新的帧。
///
/// 此函数调用[scheduleFrameCallback]注册的所有瞬时帧回调(TRANSIENT FRAME CALLBACKS)
/// 然后返回，运行任何预定的微任务（例如，通过瞬态帧回调解决的任何[Future]的处理程序），
/// 并调用[handleDrawFrame]以继续帧。
///
/// 若传入时间戳为空，则重用最后一帧的时间戳。
///
/// 若想在 debug 模式下的每帧开始处显示横，将[debugPrintBeginFrameBanner]设置为true。
/// 横幅将使用[debugPrint]打印到控制台，并包含帧号(每帧加1)和帧的时间戳。
/// 若传入时间戳为空，则显示字符串“warm-up frame”而非时间戳。
/// 它允许响应操作系统的“Vsync”信号，从而将 frames 主动推入的帧与引擎请求的帧区分开来。
///
/// 也可以将[debugPrintEndFrameBanner]设置为true，从而在每帧末尾显示横幅。
/// 这使的开发者可以区分打印的日志是在'帧期间'还是在'帧之间'（例如，响应事件或计时器）。
void handleBeginFrame(Duration? rawTimeStamp) {
  Timeline.startSync('Frame', arguments: timelineArgumentsIndicatingLandmarkEvent);
  _firstRawTimeStampInEpoch ??= rawTimeStamp;
  _currentFrameTimeStamp = _adjustForEpoch(rawTimeStamp ?? _lastRawTimeStamp);
  if (rawTimeStamp != null)
    _lastRawTimeStamp = rawTimeStamp;
    _hasScheduledFrame = false;
  try {
    // TRANSIENT FRAME CALLBACKS
    Timeline.startSync('Animate', arguments: timelineArgumentsIndicatingLandmarkEvent);
    _schedulerPhase = SchedulerPhase.transientCallbacks;
    final Map<int, _FrameCallbackEntry> callbacks = _transientCallbacks;
    _transientCallbacks = <int, _FrameCallbackEntry>{};
    callbacks.forEach((int id, _FrameCallbackEntry callbackEntry) {
      if (!_removedIds.contains(id))
        _invokeFrameCallback(callbackEntry.callback, _currentFrameTimeStamp!, callbackEntry.debugStack);
    });
    _removedIds.clear();
  } finally {
    _schedulerPhase = SchedulerPhase.midFrameMicrotasks;
  }
}

3.5.2. handleDrawFrame

[flutter/lib/src/widgets/binding.dart]

/// 由引擎调用以绘制出新的帧。
///
/// 此方法在 [handleBeginFrame] 之后立即被调用。
/// 它调用由[addPersistentFrameCallback]注册的所有回调，这些回调通常驱动渲染管道，
/// 然后调用由[addPostFrameCallback]注册的回调。
///
/// 可以参阅 [handleBeginFrame] 的挂载调试(debugging hooks)，它在处理帧回调时可能很有用。
void handleDrawFrame() {
  assert(_schedulerPhase == SchedulerPhase.midFrameMicrotasks);
  Timeline.finishSync(); // end the "Animate" phase
  try {
    // PERSISTENT FRAME CALLBACKS
    _schedulerPhase = SchedulerPhase.persistentCallbacks;
    for (final FrameCallback callback in _persistentCallbacks)
      _invokeFrameCallback(callback, _currentFrameTimeStamp!);

    // POST-FRAME CALLBACKS
    _schedulerPhase = SchedulerPhase.postFrameCallbacks;
    final List<FrameCallback> localPostFrameCallbacks =
        List<FrameCallback>.from(_postFrameCallbacks);
    _postFrameCallbacks.clear();
    for (final FrameCallback callback in localPostFrameCallbacks)
      _invokeFrameCallback(callback, _currentFrameTimeStamp!);
  } finally {
    _schedulerPhase = SchedulerPhase.idle;
    Timeline.finishSync(); // end the Frame
    _currentFrameTimeStamp = null;
  }
}

3.5.3. scheduleFrame

[flutter/lib/src/widgets/binding.dart]

/// 如有必要，可通过调用[Window.scheduleFrame]来调度一个新帧。
///
/// 调用此方法后，引擎将（最终）调用 [handleBeginFrame]。 
/// （该调用可能会延迟，例：如果屏幕处于关闭状态，则通常会延迟直到屏幕打开且应用程序可见为止。）
/// 在一个帧中调用此方法则会强制调度另一个帧，即使当前帧尚未完成。
///
/// 调度帧由操作系统提供的 “Vsync” 信号触发。
/// 历史上屏幕通过 “Vsync”信号 刷新显示内容
/// 现在硬件的操作更复杂些，但通过“Vsync” 信号重新渲染从而刷新APP的方案继续被延用。
///
/// 若想打印调度帧的堆栈信息，需将[debugPrintScheduleFrameStacks]设置为true。
///
/// 参见:
///
///  * [scheduleForcedFrame], 在调度帧时会忽略[lifecycleState]。
///  * [scheduleWarmUpFrame], 完全忽略“Vsync”信号并立即触发帧绘制。
void scheduleFrame() {
  if (_hasScheduledFrame || !framesEnabled)
    return;
  ensureFrameCallbacksRegistered();
  window.scheduleFrame();
  _hasScheduledFrame = true;
}