美团 iOS 端开源框架 Graver 在动态化上的探索与实践( 二 ) _框架

Graver 已经在美团 App 的外卖频道、独立外卖 App 核心业务场景的多个业务中经历了一年多的实践检验。良好的稳定性和出色的渲染性能，也得到了美团外卖内部技术团队的认可和肯定。关于 Graver 更多的内容这里不再赘述，详细介绍请参考另一篇技术博客：《美团开源 Graver 框架：用“雕刻”诠释 iOS 端 UI 界面的高效渲染》。如何构建基于 Graver 进行异步渲染的动态化框架（MTFlexbox），成为首先需要解决的问题。

文章插图

图6-1 拼控件

文章插图

图6-2 画控件
“拼控件”到“画控件”
通过对系统 UI 渲染流程分析不难发现：唯一确定一个视图展示仅需要确定视图布局信息、内容信息、渲染信息三个要素。含义如下：

布局信息：UI 控件的大小、位置和展示层级。
内容信息：UI 展示的文本、图片等。
渲染信息：包括UI控件的背景色、展示字体字号、透明度、边框等控件视觉属性。

Graver 的每个绘制元素通过 WMMutableAttributedItem 来表达内容信息、渲染信息， CGRect 表达绘制元素的大小和位置。渲染整个过程除画板视图外，完全没有使用 UIKit 控件，最终产出的结果是一张位图（Bitmap）。如果能通过一棵树形结构组织所有的绘制元素即绘制结点树，即可按照递归遍历的方式“画控件”来转义“拼控件”构建视图。
接下来，我们需要思考如何建立 MTFlexbox 的数据结构与绘制结点树之间的关系，并且保证该转化过程完全异步化。
构建虚拟结点树
如开篇动态布局框架章节 MTFlexbox 的原理所描述：在相继完成模板树构建、数据绑定之后即进行了视图树构建。然而，出于功能划分考虑、兼顾保留 MTFlexbox 的系统 UI 渲染引擎能力以及构建绘制结点树需要的必要信息考虑，需要构建一个中间数据结构：虚拟结点树。它应包含树形结构的层级信息、Flex 属性信息、数据解析处理后的内容信息以及基本的渲染信息。虚拟结点树是既能构建 UI 控件树也能构建绘制结点树的“桥梁” 。

文章插图

图7 MTFlexbox 改造
设计数据流
通过上述思路分析，确定了关键数据结构：虚拟结点树、绘制结点树。接下来，我们需要思考如何构建虚拟结点树到绘制结点树的数据流。
在前端有两个重要的概念：回流、重绘。

回流：当我们对结点树的修改引发了几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来，这个过程就是回流（也叫重排）。
重绘：当我们对结点树的修改导致了样式的变化，却并未影响其几何属性（比如修改了颜色或背景色）时，不需重新计算元素的几何属性，可以直接为该元素绘制新的样式。

参考前端技术思想以及考虑单一职责原则，在虚拟结点树与绘制结点树中间构建 Fat 型渲染结点树和 Thin 型渲染结点树。Fat 型渲染结点树负责保存原始数据以便做逻辑处理， Thin 型渲染结点树负责保存位置、大小和内容信息。当有修改不影响几何尺寸变化的情况下，仅重新生成 Thin 型渲染结点树的内容信息即可。

文章插图

图8 虚拟结点树到位图的转换
线程安全考虑
提高渲染性能的关键，即是全力保证主线程的最小资源开销。因此，需要思考如何保证虚拟结点树到绘制结点树的转换过程是线程安全的。Facebook 开源的跨平台布局引擎 Yoga ，提供了通过 UI 视图树中 Flex 属性计算得出每个 UI 控件的位置和大小。然而，提供给 iOS 平台的插头类是基于 UIView 的，即布局计算过程必须在主线程。需要基于 Yoga 核心逻辑重新封装基于渲染结点树的计算逻辑，以保证布局计算是线程安全的。如下图所示：