本文档描述了 Graver 框架不同模块的高层描述，并试图解释它们如何协同工作。你可以把本文档作为一个学习起点。
本框架主要涉及图文混排、预排版、单向数据流、异步绘制、UI渲染、图像显示等方面的技术。当我们仅关注使用时，仅学习 面向视觉元素编程 即可。如果对框架实现感兴趣，可选择性学习 预排版、图文混排、异步绘制。
我们认为界面展示的任一视觉元素都可以用两个核心要素表达：位置、大小 和 展示内容。位置、大小由 CGRect 类型的 Frame 表示，展示内容由 WMMutableAttributedItem 表示。 基于此，WMMutableAttributedItem 要有强大的表达能力来表示任一视觉元素。框架提供了一系列的围绕 WMMutableAttributedItem 的周边建设，如图所示：
- NSMutableAttributedString (GTextProperty) 描述富文本的字体、颜色等渲染属性。
- NSAttributedString (GCalculateAndDraw) 提供了计算和绘制相关的服务。
- UIImage (Graver) 提供了丰富的预渲染功能，如将文本绘制到图片上等。
- WMGActiveRange 协议描述了激活区，即提供点击事件的表达。
- WMGAttachment 协议提供了混排图文的基础。
如果想深入理解面向视觉元素理念请参考美团技术博客 美团开源Graver框架：用“雕刻”诠释iOS端UI界面的高效渲染。
框架采用单向数据流思想来描述异步渲染的全体过程，预排版部分进行了明确的职责划分，如图所示：
预排版部分按照 MVVM 方式设计，抽象了排版数据和业务数据的对应关系，持有关系如上图表示。
注意： 排版数据仅用来进行展示，不要直接操作、修改它。在需要进行UI样式变更的时候，一定是通过数据持有方向，找到原始业务数据进行数据变更，稍后会由框架决定在合适的时机进行新一轮次的排版。
WMGBusinessModel *model = [cell.cellData metaData];
model.var = "new value"; // var 代表某一业务数据模型的成员变量
[model setNeedsUpdateUIData]; // 设置需要更新其对应的排版数据框架对 CoreText、CoreGraphic 相对偏底层的调用全都封装了起来，向上层提供基础排版能力，这里的排版指的是 CoreText 层面的排版，是对预排版之后的数据进行最后的排版处理，经过该部分处理，下一步就可以直接渲染到界面上了。模块内关系如下图所示：
关于异步绘制，我们提供了上层画板视图 WMGCanvasView，我们可以直接使用，或者以继承的方式使用均可。异步绘制的工作原理如下：
如上图所示，Graver 涉及多个队列间的交互，以外卖 App 商家列表为例，整体流程如下：
主线程构建请求参数，创建请求任务并放入网络线程队列中，发起网络请求；
网络线程向后端服务发起请求，获得对应的业务模型数据（如包含了店铺名称，商家头图，评分，配送时长，客单价，优惠活动等店铺属性的商家卡片列表）；
网络线程创建包含业务模型数据（如商家卡片列表）的排版任务，提交到预排版线程处理，进入预排版流程。预排版队列取出排版任务，交由布局引擎计算UI布局，将业务模型解析成可被渲染引擎直接处理的，包含布局、层级、渲染信息的排版模型。解析结束后，通知主线程排版完成；
主线程获取排版模型后，随即触发内容显示。根据相对屏幕位置及出现的先后顺序，创建包含将需要显示区域信息的绘制任务，放入异步绘制线程队列中，发起绘制流程；
异步绘制线程队列取出绘制任务，进行图文绘制，最终输出一张包含了图文内容（如商家卡片）的图片。绘制任务结束后，通知主线程队绘制完成，主线程随后展示绘制区域。
整体按照队列间串行、队列内并行的方式执行。