一： 概述
学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(
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 attachToRenderTree(BuildOwner owner, [ RenderObjectToWidgetElement 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 createElement() => RenderObjectToWidgetElement(this);
/// 创建 [RenderObject]托管的 节点
///
/// 创建的[RenderObject]不会添加到 render 树中，需要调用
///[RenderObjectToWidgetAdapter.attachToRenderTree] 添加
RenderObjectToWidgetElement(RenderObjectToWidgetAdapter 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 callbacks = _transientCallbacks;
_transientCallbacks = {};
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 localPostFrameCallbacks =
List.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;
}