浅析Flutter渲染流水线

渲染的流程简介

Flutter渲染相关的三种树Widget树，Element树，RenderObject树。这种分层的设计不仅使代码的可维护性有了显著的提高，性能也有一定的提升。Android中的渲染就没有分层的概念，都是在View类中完成的。View的渲染简单分三步：

• Measure阶段（测量自己的大小）
• Layout阶段 （准确定位自己的位置，以及相对于父View的位置）
• Draw阶段 （自己绘制自己）

Flutter的渲染和Android有些不同，简图如下： Flutter的三种树的作用，各司其职。Widget是绘制的蓝图，可以理解为配置，不可变，短生命周期；Element保持Widget和RenderObject的引用，用于比较是否创建新的RenderObject，Element本质上表示使用Widget来配置树中的特定位置，Element作为Widget和RenderObject之间的桥梁； RenderObject树包含渲染实际Widget的逻辑，RenderObject对象更重量级，实例化成本更高，尽可能复用，RenderObject处理布局、绘制等任务。总之，Widiget件描述“什么”（UI 设计）。 Element负责连接和管理更新。 RenderObject处理“如何”（高效渲染）。

Flutter布局（layout）

Flutter应用于其渲染流水线的首要原则是简单就是快速。Flutter限制布局的总原则（layout数据流向）：首先，上层Widget向下层Widget传递约束条件；然后，下层Widget向上层 Widget传递大小信息。最后，上层Widget决定下层Widget的位置。从上到下遍历一次，线性时间内布局和绘制保证Flutter在性能方面有无法比拟的优势。

Flutter线程

Flutter有四种类型的线程。

• 平台线程 平台的主线程。插件代码在此运行。有关更多信息，请参阅iOS的UIKit文档或Android的MainThread文档。
• UI线程 UI线程在Dart VM中执行Dart代码。此线程包括您编写的代码以及 Flutter 框架代表您的应用执行的代码。当您的应用创建并显示场景时，UI 线程会创建一个图层树（一个包含与设备无关的绘制命令的轻量级对象），并将图层树发送到光栅线程以在设备上渲染。
• 光栅线程（GPU线程） 光栅线程获取图层树并通过与GPU（图形处理单元）通信来显示它。您无法直接访问光栅线程或其数据，但如果此线程很慢，这是您在Dart代码中所做某事的结果。图形库 Skia和Impeller在此线程上运行。请注意，虽然光栅线程为GPU进行光栅化，但线程本身在CPU上运行。
• I/O 线程 执行昂贵的任务（主要是I/O），否则会阻塞UI或光栅线程。

Flutter渲染流水线架构图

上面的图7步分析如下

1. Animate：在动画执行过程中，Flutter会重新构建并且绘制每一帧。
2. Build: 构建生成Flutter的三种树：Widget树，Element树，RenderObject树。
3. Layout：准确定位自己（RenderObject）的位置，以及相对于父View（RenderObject）的位置。
4. Paint：绘制到Layer。
5. Submit:不同的Layer形成Layer tree。
6. Raster & Compositor:GPU线程通过Skia(或者Impeller)将一帧数据绘制到GPU，GPU将帧信息存放到帧缓冲区中，然后根据VSync信号周期性的从帧缓冲区中读取帧数据，提交到显示器进行最终显示。 更全的注释是在\flutter_windows_3.19.3-stable\flutter\packages\flutter\lib\src\rendering\binding.dart下面的drawFrame()方法前面（我的Flutter版本是windows_3.19.3-stable）。

  /// Pump the rendering pipeline to generate a frame.
  ///
  /// This method is called by [handleDrawFrame], which itself is called
  /// automatically by the engine when it is time to lay out and paint a frame.
  ///
  /// Each frame consists of the following phases:
  ///
  /// 1. The animation phase: The [handleBeginFrame] method, which is registered
  /// with [PlatformDispatcher.onBeginFrame], invokes all the transient frame
  /// callbacks registered with [scheduleFrameCallback], in registration order.
  /// This includes all the [Ticker] instances that are driving
  /// [AnimationController] objects, which means all of the active [Animation]
  /// objects tick at this point.
  ///
  /// 2. Microtasks: After [handleBeginFrame] returns, any microtasks that got
  /// scheduled by transient frame callbacks get to run. This typically includes
  /// callbacks for futures from [Ticker]s and [AnimationController]s that
  /// completed this frame.
  ///
  /// After [handleBeginFrame], [handleDrawFrame], which is registered with
  /// [dart:ui.PlatformDispatcher.onDrawFrame], is called, which invokes all the
  /// persistent frame callbacks, of which the most notable is this method,
  /// [drawFrame], which proceeds as follows:
  ///
  /// 3. The layout phase: All the dirty [RenderObject]s in the system are laid
  /// out (see [RenderObject.performLayout]). See [RenderObject.markNeedsLayout]
  /// for further details on marking an object dirty for layout.
  ///
  /// 4. The compositing bits phase: The compositing bits on any dirty
  /// [RenderObject] objects are updated. See
  /// [RenderObject.markNeedsCompositingBitsUpdate].
  ///
  /// 5. The paint phase: All the dirty [RenderObject]s in the system are
  /// repainted (see [RenderObject.paint]). This generates the [Layer] tree. See
  /// [RenderObject.markNeedsPaint] for further details on marking an object
  /// dirty for paint.
  ///
  /// 6. The compositing phase: The layer tree is turned into a [Scene] and
  /// sent to the GPU.
  ///
  /// 7. The semantics phase: All the dirty [RenderObject]s in the system have
  /// their semantics updated. This generates the [SemanticsNode] tree. See
  /// [RenderObject.markNeedsSemanticsUpdate] for further details on marking an
  /// object dirty for semantics.
  ///
  /// For more details on steps 3-7, see [PipelineOwner].
  ///
  /// 8. The finalization phase: After [drawFrame] returns, [handleDrawFrame]
  /// then invokes post-frame callbacks (registered with [addPostFrameCallback]).
  ///
  /// Some bindings (for example, the [WidgetsBinding]) add extra steps to this
  /// list (for example, see [WidgetsBinding.drawFrame]).
  //
  // When editing the above, also update widgets/binding.dart's copy.
  @protected
  void drawFrame() {
    rootPipelineOwner.flushLayout();
    rootPipelineOwner.flushCompositingBits();
    rootPipelineOwner.flushPaint();
    if (sendFramesToEngine) {
      for (final RenderView renderView in renderViews) {
        renderView.compositeFrame(); // this sends the bits to the GPU
      }
      rootPipelineOwner.flushSemantics(); // this sends the semantics to the OS.
      _firstFrameSent = true;
    }
  }

思考题

例如，许多应用程序都有一个“页脚”，其中包括图标和一些有关版权的文字。为什么优先考虑Widget组合而不是函数？您绝对不应该偏爱函数而不是Widget，因为：

• 函数当然没有const构造函数。
• Flutter每次都被迫重建函数返回的Widget，因为它对它们一无所知（没有提供BuildContext）。
• 类是Widget tree的叶子，但函数不是，因此没有可用的BuildContext。 由于const构造函数，Widget可以被缓存；函数不能被缓存，因此每次都会执行它们。您应该（或者实际上...必须！）始终依赖可重用的Widget，而不是函数。

总结

Flutter渲染流水线是Flutter相关技术中比较重要的一个课题，学好这个相关的知识之后，不仅能够开发出性能优异的应用；遇到相关的渲染的bug和性能问题，也能够游刃有余地迅速解决。知其然，知其所以然，其实就是这个道理。学习技术，我觉得应该需要“打破砂锅问到底”的劲头，同样也需要精益求精的工匠精神。

致谢

希望文章对大家有所帮助，如果文章有所纰漏请不吝指教，大家共同进步。欢迎关注“技术蔡”的公众号，此公众号也是本作者的技术相关的公众号。

参考文档

深入理解Flutter布局约束

Flutter performance profiling

Flutter's Rendering Pipeline