阅读 2775

Flutter 究竟是如何渲染的?

之前,写了一篇《iOS 浅谈GPU及“App渲染流程”》阐述了iOS端App的渲染流程。
其中包括三种渲染方式,分别是:
1.iOS原生渲染:使用原生控件、原生语言编写。
2.大前端渲染(一种是WebView,另一种是JSCore引擎作为虚拟机)。
3.Flutter渲染。

《上篇博客》主要讲解了iOS APP渲染的流程,以及GPU的渲染流水线。
但关于Flutter是如何渲染的?我上篇写的并不是很透彻。
所以本篇将和大家一起谈谈 —— “ Flutter 究竟是如何渲染的? ”


一、Flutter 的架构

先从Flutter的整体架构说起,共分为三层,又下到上分别为:Embedder层、Engine层、Framework层。

分别对应:

  • Embedder层:操作系统底层适配层。
  • Engine层:渲染引擎层。
  • Framework层:用Dart实现的上层UI SDK。

Flutter架构

那么,这三层的职责是什么?究竟分别做了哪些事呢?

从上到下开始,先从我们相对比较熟悉的 Framework 层说起。

1. Framework层:Dart实现的上层UI SDK

实现了:Animation(动画)、Painting(图形绘制)、Gestures(手势操作)等功能,并包装成对应的 api 提供给上层开发者调用。
为了保证Flutter所绘制的控件与原生控件风格类似,Flutter封装了Material(对应Android)、Cupertino(对应iOS)风格的UI组件库,供开发者直接使用。

2. Engine层:Skia渲染 + DartVM 引擎

这层主要包含三块:SkiaDartText
Skia 是渲染引擎,为 Framework 层提供“底层渲染”能力。
DartDart 运行时引擎,为 Framework 层提供运行时调用Dart和渲染能力。
Text 是文字排版,为 Framework 层提供视图排版能力。

3. Embedder层:操作系统适配

对不同平台操作系统的适配,包括一些配置:surface、线程、插件等特性。
由于Flutter相关特性并不多,因此对不同平台操作系统的适配成本很低。

二、Flutter 的 渲染策略

我们都知道,在Flutter中,Everything is widget

所有 Widget 会组成 Widget Tree
界面更新时,会更新 Widget Tree
再更新 Element Tree ,最后更新 RenderObjectTree

那么,究竟Flutter是怎么更新界面的?又有哪些优化的渲染策略呢??

分为4个阶段,分别是:

布局阶段 => 绘制阶段 => 合成阶段 => 渲染阶段
Layout => Paint => Composite => Rasterize

1. 布局(Layout)

Flutter采用 “深度优先” 机制遍历Widget Tree。

我们都知道,在布局过程中,Widget树中的每个孩子节点都会受到父节点所加的位置约束。(也就是说,父节点决定孩子节点的位置,孩子节点只能决定自己的大小。)

先确定父节点的大小、位置,
再确定孩子节点的位置,
再确定孩子节点的大小。
....一直往下,
直到没有孩子Widget后,返回完成。

Layout

PS:深度优先于广度优先的区别:参考博客

为了防止孩子节点的变化,导致整个 Widget Tree 重新布局。
Flutter加入了 “布局边界” 机制(Relayout Boundary)。(划重点,★优化点★)

在某些节点,“自动”或“手动”加上 “布局边界” ,控制边界。
在该布局边界内的任何节点发生重新布局,都不会影响边界外的 Widget Tree的布局。

Relayout Boundary

布局完成后,树上每个节点都确定了“尺寸大小”和“位置”。

2. 绘制(Paint)

刚才,我们确定了树上的控件的“尺寸”与“位置”。
接下来是绘制阶段。

和布局类似,Flutter也是采用 “深度优先” 机制遍历渲染树。
先绘制自身,再绘制子节点。

Paint

但是,会出现一些绘制图层覆盖问题。
比如,当节点2需要重绘时,节点2、5、6一起重绘了(其实只要重绘节点2、5)。

Repaint Boundary

为了解决绘制覆盖问题,Flutter采用了也是和布局阶段相似的策略: 重绘边界 机制(Repaint Boundary)。
其实,本质上就是加个新的图层,避免在同一图层重绘产生影响。(划重点,★优化点★)

典型的例子是,ScrollView。
一旦设置好重绘边界,滚动时,只会重绘ScollView中的视图内容,而其他部分不用重新绘制。(划重点,★优化点★)

3. 合成(Composite)

由于绘制出来的渲染树,会有很多层,同步多层渲染会出现性能问题。
因此,Flutter会在渲染前,将多个渲染树图层进行合成。(划重点,★优化点★)
根据多层渲染树的大小、层级、透明度等计算后,
合成为最终“简化版”的渲染树,以提高下一步的渲染效率。

4. 渲染(Rasterize)

将处理过的“简化版”渲染树,交给Skia引擎转换成“二维图像数据”。
然后 Skia 把计算好的图形数据,通过 OpenGL 接口交给 GPU 渲染,走上一篇《iOS 浅谈GPU及“App渲染流程”》中提到的 GPU 工作流水线:
顶点着色器 => 形状装配 => 几何着色器 => 光栅化 => 片段着色器 => 测试与混合。

然后,GPU工作流水线六阶段完成。

最终,展示到我们的终端屏幕上。

当然这只是一个垂直同步信号(VSync)的过程。(按60fps算,一秒需要60个VSync才不会感到卡顿。)

三、Flutter 渲染工作流水线

按60fps算,一秒需要60个VSync才不会感到卡顿。

Flutter渲染流水线

在流水线的Widget更新,Flutter也有优化的点:

简单来说,就是chind节点能复用就复用。不能复用,就重新绘制。

更新Widget的逻辑如下:

\ newWidget == null newWidget != null
child == null 返回null 返回新的Element
child != null 移除旧的child并返回null 如果旧child被更新就返回child,否则返回新的Element

参考与致谢:
1.《Flutter核心技术与实战》(陈航老师)
2. 小德 -- Flutter 技术分享
3.《Flutter从加载到显示》 (圣文前辈)