Litho在动态化方案MTFlexbox中的实践

1. MTFlexbox

MTFlexbox是美团内部应用的非常成熟的一种跨平台动态化解决方案，它遵循了CSS3中提出的Flexbox规范来抹平多平台的差异。MTFlexbox适用于重展示、轻交互的业务场景，与现有HTML、React Native、Weex等跨平台方案相比，MTFlexbox具备着性能高、渲染速度快、兼容性高、原生功能支持度高等优势。但其缺点在于不支持复杂的交互逻辑，不适合复杂交互的业务场景。目前，MTFlexbox已经广泛应用在美团首页、搜索、外卖等重要业务场景。本文主要介绍在MTFlexbox中使用Litho优化性能的实践经验，更多关于MTFlexbox的实践内容，可查阅《MTFlexbox自动化埋点探索》。

1.1 MTFlexbox的原理

MTFlexbox首先定义一份跨平台统一的DSL布局描述文件，前端通过“所见即所得”的编辑器编辑产生布局，客户端下载布局文件后，根据布局中的描述绑定JSON数据，并最终完成视图的渲染。MTFlexbox框架图如下图所示：

图中分为五层，分别是：

• 业务应用层：业务使用MTFlexbox的编辑器定义符合Flexbox规范的DSL文件（XML模版）。
• 模版下载：负责XML模版下载相关的工作，包括模板缓存、预加载和异常监控等。
• 模版解析：负责模版解析相关的工作，包括标签节点的预处理、数据绑定、标签节点的缓存复用和数据异常监控等。
• 视图渲染：负责视图渲染相关的工作，包括把标签结点按照Flexbox规范解析成Native视图，并完成视图属性的设置、点击曝光事件的处理、视图渲染、异常监控等。
• 自定义标签扩展：提供支持业务扩展自定义标签的能力。

鉴于本篇博客主要涉及渲染相关的内容，下面将着重介绍MTFlexbox从模版解析到渲染的过程。如下图所示，MTFlexbox首先会把XML模版解析成Java中的标签树，然后和JSON数据绑定结合成一颗具有完整数据信息的节点树。至此，模版解析工作就完成了。解析完成的节点树会交给视图引擎进行Native视图树的创建和渲染。