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

近些年，移动端动态化技术可谓是“百花齐放” ，其中的渲染性能也是动态化技术一直在探索、研究的课题。美团的开源框架 Graver 也为解决动态化框架的渲染性能问题提供了一种新思路：关于布局，我们可以采用“画控件”方案替代传统的“拼控件”方式。本文尝试给出一些探索思考与实践经验的分享。

前言
动态化技术指的是不依赖程序安装包，就能进行动态实时更新页面的技术。特别是对于电商、社交等需要快速迭代、实时调整的强运营类业务来说，动态化具有非常重要意义。它的优势主要表现为：提高人效、缩短迭代试错周期、解决版本长尾问题、减少包大小等等。
从2018年开始，移动端设备的增长红利不再，整个生态增长趋势开始由高走低，与之对应的开发生态在 Native 技术方向也逐渐开始进入低迷阶段，大方向在向跨平台演进，方案上已经是“百花齐放” 。现有的客户端动态化技术主要可以划分为以基于 Webview 的 Web 页面动态化加载、本地内置多个模板支持动态切换、支持动态 DSL 的布局引擎以及基于虚拟机等四类。

文章插图

图1 动态化技术分类
动态化方案的渲染引擎多数是基于原生 UI 控件搭建动态化页面。基于 Webview 的 Web 页面动态化，实质是基于浏览器运行网页，页面绘制效率、运行效率相对较低一些。而后三种解决方案，分别通过建立映射表、布局引擎、虚拟机与客户端渲染引擎通讯及调用关系，渲染引擎则都是基于原生 UI 控件搭建动态化页面。由于操作系统提供的 UI 控件布局/绘制仅支持主线程访问，大量原生 UI 控件操作导致 CPU/GPU 负担过重，所以在构建复杂的动态化页面上存在效率和性能瓶颈。因此，渲染性能是动态化技术一直在探索、研究的课题。本文尝试给出一些探索思考与实践经验的分享。

文章插图

图2 UI渲染流程
动态布局框架
如前言部分的图1所示， MTFlexbox 是美团点评自研的一款跨平台动态布局框架，它遵循了 css3 中提出的 Flexbox 规范来抹平多端差异。美团 App 首页、搜索结果页等业务有一个共同点，就是面向的业务方比较多，承载了流量输送变现的能力。在视图层面呈现轻交互、重展示的特征。频繁变动 UI ，快速上线是一个刚需， MTFlexbox 正是满足了这样一个刚需。
由于本文侧重对 MTFlexbox 的渲染性能优化，故仅对 MTFlexbox 做概括介绍。MTFlexbox 首先定义了一份跨平台统一的 DSL 布局描述文件，前端通过编辑器编辑产生布局文件并上传到云端，客户端下载布局文件然后根据布局中的描述信息绑定业务数据，最后基于原生 UI 控件搭建视图并渲染展示。MTFlexbox 的工作原理如下图所示：

文章插图

图3 MTFlexbox 工作原理
业务痛点
然而，随着业务的迭代演变，美团 App 首页、搜索结果页等业务视图卡片样式越来越多，展示也越来越复杂。样式种类多意味着视图复用率低，极端场景下甚至无法进行复用。展示复杂，同时也意味着控件数量多、布局复杂、层级深。如果大量复杂操作都发生在主线程，难免造成渲染卡顿等用户体验方面的问题。

文章插图

图4 业务痛点
针对上述问题，外卖终端用户研发组、美团终端技术研发组、美团终端业务研发组合作共赢，三方协调资源成立了跨部门、跨事业部的虚拟专项联合项目组，三方精诚合作，在技术上不断追求卓越，力求同时保证稳定性、动态化和高性能。

文章插图

图5 合作共赢
思路分析
动态布局框架 MTFlexbox 通过系统 UIKit 搭建视图并渲染展示，其测量、布局、绘制过程均发生在主线程。而作为一款 IOS 端高效的 UI 异步渲染框架 Graver ，其布局计算、渲染过程完全异步化，整个过程结束后才通知 UI 线程进行展示。这给我们解决动态化框架的渲染性能问题打开了新思路：关于布局，我们可以采用“画控件”方案替代传统的“拼控件”方式。