hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

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

2019-11-18杂谈搜奇网36°c
A+ A-

近年,挪动端动态化手艺可谓是“百花齐放”,个中的衬着机能也是动态化手艺一直在探究、研讨的课题。美团的开源框架 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 线程举行展现。这给我们处置惩罚动态化框架的衬着机能题目打开了新思绪:关于计划,我们能够采纳“画控件”计划替换传统的“拼控件”体式格局。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 中心逻辑从新封装基于衬着结点树的盘算逻辑,以保证计划盘算是线程平安的。以下图所示:

图9 基于 Yoga 的计划盘算线程平安式革新

架构设想

有了上述的思绪剖析,接下来我们最先动手 Graver 接入 MTFlexbox 的架构设想。Graver 须要作为自力衬着引擎存在,并保留接入多种动态化框架的能够,这是出于架构设想的天真性和扩大性的斟酌。接入层命名为 M-Graver,其上层基于 MTFlexbox 举行扩大但可天真插拔,基层基于 Graver 衬着引擎,以下图10所示:

图10 M-Graver 架构

M-Graver 是线程平安的,其主要分为剖析层、聚合层、计划层和准备层。下面临各层离别做简朴的引见:

  • 剖析层:关于输入定义了一个不依赖于上层 DSL 形貌言语的标准化假造结点树组织;剖析层主要举行假造结点树到衬着结点树的转换,触及标签剖析、衬着信息剖析、统计信息剖析以及 Flex 属性剖析。
  • 聚合层:完成衬着结点树的末了组织,触及可见性、交互性等处置惩罚;关于事宜绑定也是在聚合层完成,每一个事宜都以行动参数化的情势绑定到相应衬着结点上。
  • 计划层:运用 Yoga 完成每一个结点的 Frame 盘算以及层级信息处置惩罚,同时将衬着信息等内容转换到 Graver 框架可辨认的数据。
  • 准备层:举行坐标系转换,并拍平带有视图层级组织信息的衬着结点树,剔除无效衬着结点(如可见性、size 为0等),屏蔽掉由于视图层级缘由致使被完整遮挡的衬着结点,末了依据衬着结点生成绘制结点构建绘制结点树,交由 Graver 供应的画板视图举行绘制。

手艺难点题目

根据上述思绪剖析完成架构设想,但在实行布置的历程当中也碰到了不少的手艺难点和题目。如:动态计划框架 MTFlexbox 建立至今已两年有余,因营业的疾速生长而发生了一些手艺“欠债”。为了保证不影响线上原有的营业逻辑,所以在举行 MTFlexbox 的模板树到假造结点树,再到 UI 视图树的手艺升级革新历程时,特别须要关注种种“千丝万缕”式的纤细逻辑。

别的,在将异步衬着引擎 Graver 接入 MTFlexbox 的历程当中也碰到了诸多题目,包括如何构建基于位图的事宜处置惩罚体系,跨衬着引擎的手艺融会,一些极度场景下的绘制效力瓶颈等等。下面将一一睁开论述。

1. 如何基于位图举行事宜处置惩罚

由于视图终究经由历程衬着位图来显现,这就须要竖立基于位图的事宜处置惩罚体系。如前文所述,衬着结点树记录了每一个控件的位置、大小信息以及层级组织,基于此可模仿体系事宜处置惩罚逻辑举行基于位图的事宜处置惩罚体系设想。在视图展现时期,画板视图收到事宜相应关照后(如点击了画板视图中标号为5的赤色按钮),依据位图对应的衬着结点树存储的各控件计划、层级和衬着信息,逐层遍历找到须要相应的衬着结点,假如触及信息修正则变更其在衬着结点树中的衬着信息,触发再次衬着的同时实行该衬着结点绑定的事宜要领。遍历衬着结点树的输入是体系基于画板视图返回的点击位置,其遍历历程与体系 UI 事宜查找历程比较类似。事宜处置惩罚历程以下图11所示:

图11

2. 体系 UI 控件与绘制元素的融会题目

从美团营业特性动身,图文组合占有多半 UI 场景。但是也存在诸如动效等没法依托 Graver 举行图文衬着的状况。因而,须要斟酌跨衬着引擎的衬着融会题目。在 M-Graver 的准备层遍历衬着结点树时,能够依据当前结点是不是为原生结点决定树拆分,假如是原生结点,将该结点连同其子树“直系”绘制结点从衬着结点树中拆分下来,以该结点为根结点的子衬着结点树,生成对应的绘制结点树,多个子衬着结点树的根结点,构成了以画板视图为单位的画板视图树。以下图12所示:

图12 结点融会

为了便于明白,我们给出以下几个名词的诠释申明:

  • 绘制结点:衬着结点树中的结点假如能够转化成绘制结点树中的结点,则称之为绘制结点,末了经由历程 Graver 举行衬着。
  • 原生结点:衬着结点树中的结点假如不能转化成绘制结点树中的结点,只能转化成体系 UI 控件则称之为原生结点。
  • 结点变异:以一个二叉衬着结点树为例,左子结点是原生结点,右子结点是绘制结点的状况下,由于左子结点先于右子结点添加到父节点,能够存在层级倒置题目。这时候右子结点须要强迫转为原生结点,坚持准确的层级递次,即结点变异。
  • 画板视图:继续自 UIView 的一般视图,其内部封装了一系列的基于 Graver 的衬着逻辑。

树拆分的历程还触及到兄弟结点层级倒置以及计划交织等题目。兄弟结点层级倒置题目经由历程结点变异来处置惩罚。计划交织题目存在于剖断衬着结点树的结点是绘制结点或原生结点之前,由于计划缘由存在视图交织。计划交织题目经由历程新建画板视图插进去来保证层级准确以及绘制准确。由于篇幅有限,这里不再赘述。

3. 极度场景下的绘制效力瓶颈题目

从产物交互层面看,为了进步屏效每每存在多向滑动的视图组件场景。如横滑 Scroll 组件,其特点是须要经由历程滑动才逐步看到一切的视图内容。经由历程异步衬着绘制位图来完成的状况下,存在单一并发衬着使命盘算逻辑沉重的题目,从用户体验层面看轻易形成“白屏”征象。为处置惩罚该题目,将视图卡片衬着历程剖析,举行增量衬着,采纳渐进式的体式格局削减空缺页面等待时间。依据待展现地区在屏幕中相对位置举行区块分别,经由历程行列集中控制绘制操纵。以此进一步进步并发效力,并削减衬着历程的非必要体系资本斲丧。

区块分别

区块分别战略的本质是绘制结点树的拆分,将绘制结点树中不存在计划交织的子结点树举行一一拆分,每一个拆分下来的绘制结点子树即为一个区块,同时要设置最小块战略,不然拆分粒度太小反而会由于过量的线程并发形成机能瓶颈。

图13 分块

分块绘制

以下图为例申明分块绘制逻辑。在滑动历程当中,若当地缓存有此地区绘制结果,读取缓存并直接关照主线程展现,如例4中 X4’。不然,将该地区到场行列,以块为单位举行并发绘制,绘制完成后更新缓存,再关照主线程展现,如例1中 X1’,例2中 X2‘,例3中 X3’。对划到屏幕外的地区,从行列中消灭,停止绘制操纵;若此地区已绘制完成,则关照主线程消灭此地区的展现,如例2中 X2,例3中 X3,例4中 X4。

图14 分块绘制示意图

营业运用

在完成“拼控件”到“画控件”的思绪探究与手艺落地以后,须要发挥其代价,将其布置到线上举行营业实践运用。动态计划框架 MTFlexbox 的跨平台代码复用才对营业开辟效力有了大幅提拔。从产物层面看,在原有资本稳定的状况下,达到了高效支持营业迭代的结果。MTFlexbox 动态计划框架在阅历了一次团结共建的“浸礼”后衬着机能获得大幅进步,变得越发成熟、完美。在过去的半年多时期,我们采纳异步衬着引擎 Graver 的 MTFlexbox 已前后运用在搜刮结果页、美团首页等中心流量区营业。下面枚举部份运用案例:

图15 美团首页、搜刮结果页

采纳异步衬着引擎 Graver 的 MTFlexbox 绝大多半运用场景为列表级运用。如上图所示,一切视图卡片均为采纳 M-Graver 完成的动态模板。截止到发稿,掩盖搜刮结果页36个动态模板,掩盖首页42个动态模板,营业运用累计掩盖78个动态模板。

数据目的

以营业运用美团 App 新版首页为例,分类频道卡片以下悉数为 MTFlexbox 完成的动态模板视图卡片。由于采纳异步衬着引擎 Graver 的 MTFlexbox 具有了在线程平安条件下举行丈量、计划、衬着,美团首页接入后转动 FPS 提拔显著,关于上拉加载历程的 FPS 提拔越发显著。因而,列表运用体验更改越发顺畅。美团首页的50分位转动 FPS 靠近59,上拉加载 FPS 靠近满帧。细致数据以下图所示:

图16 优化前后 FPS 对照

总结复盘

从营业场景作为出发点和原始驱动力,如何改良动态计划框架的衬着机能题目,从本质上讲是处置惩罚营业迭代演化时带来的用户体验题目。这里有以下几点履历可供人人参考:

  • 在项目设想阶段要衡量斟酌手艺计划全景,作为手艺方向计划,不做暂时计划;架构设想要统筹合理性、天真性、扩大性。
  • 时期也会碰到诸如原生结点和绘制结点如何融会、事宜处置惩罚体系如何建立、如何分区绘制等一系列题目。坚持开放心态,作为探究性项目在计划细节上有许多可行性,充足议论、盯紧目的,不走极度。
  • 在跨部门合作项目中,特别要关注项目治理、会议记录、里程碑等,同时坚持高频的沟通。

末了,借用朱光潜先生在《艺文杂谈·谈对话体》中提到的一句话作为末端:“疑问是头脑的出发点与中心。”

参考资料

  • 美团挪动端动态化实践
  • 深切相识浏览器的页面衬着机制

作者简介

  • 洋洋,美团点评资深工程师。
  • 柏泉,美团点评高等手艺专家。
  • 晓宇,美团点评研发工程师。

雇用

美团外卖历久雇用 Android、iOS、FE 高等/资深工程师和手艺专家,Base 北京、上海、成都,迎接有兴致的同砚投递简历到duyao04@meituan.com。

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
美团 iOS 端开源框架 Graver 在动态化上的探究与实践

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

本文来源:搜奇网

本文地址:https://www.sou7.cn/281944.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>