以美团为例 分析React Native页面加载性能优化的最佳路径

作者: MM

从 2018 年初美团就开始了基于 React Native 建设高性能动态化容器,让业务层面享受动态化便利的同时,获得媲美 Native 开发的页面性能,助力业务实现页面秒开、甚至页面直出的加载体验。多年发展下,团队也总结出了一套 React Native 的性能优化实践经验。

在移动开发领域,React Native 无疑是一个非常热门的开发框架,其相比 Native 开发最大的差距体现在性能上,尤其在打开页面时会明显感到加载速度变慢。搭载 React Native 框架就不得不面对性能调优的问题,这也是令大多数开发者头疼的地方。

React Native 页面加载性能优化的最佳路径有哪些?有哪些“坑点”需要注意?跨平台开发流行的当下,技术框架选型上有哪些注意事项?带着这些问题,InfoQ 采访到美团移动端技术专家吴卓,他将分享团队在 React Native 性能优化实践层面的一些经验,以及对于技术框架选型的一些建议。此外,在 5 月 29-31 日 QCon 全球软件开发大会(北京站)2021会议上,他也将分享相关的实践案例,为使用 React Native 的开发人员,提供相关的经验做参考。

以下为正文:

记者:请简述下美团 React Native 页面加载性能优化的实践路径。

吴卓:相比原生开发性能,React Native 最直观的差距体现在页面加载速度上,这也是我们一直在研究的重点。性能优化一般包括以下 3 个阶段:

建立衡量指标

提供优化手段

运营推动治理

在加载性能指标方面,我们重点关注秒开率、页面加载时长两个指标,其中秒开率是用户视角下的结果指标,而页面加载时长是框架层面优化下的重要过程指标。在优化手段方面,我们侧重于从 Native 侧进行优化,提供优化的手段多达二十余种,在业务层、框架层、React Native 层、引擎层均有优化工作。在运营推动方面,因为框架团队和业务团队分属不同部门,框架团队不可能直接给业务团队下指标去完成任务,这时候更多靠运营手段进行推动,包括建立标准值、跨业务横向对比,以此敦促业务去做性能优化。

记者:项目研发过程中遇到过哪些挑战?如何解决的?

吴卓:我们在技术层面和非技术层面都遇到了不少挑战,下面从这两个角度出发列举两条:

技术层面的挑战: 最开始我们从框架层以操作前置为主要思路进行优化,将很多耗时的操作放在进入页面前执行,但是最终呈现出来的效果却有限。后来我们不断深入进行 React Native 及 JS 引擎底层研发,由此研究出了一些帮助业务进一步提升页面加载性能的“黑科技”,这部分我将会在 【QCon 全球软件开发大会(北京站)2021- 移动新生态趋势下的应用实践】 专场上给大家分享。

非技术层面的挑战: 除了技术上的难点,业务间的协同和管控也是个令人头疼的问题。美团 App 上有很多业务都在使用 React Native,但我们可提供的一些优化方案需要占用额外资源,比如:启动时下载、引擎保活池等,所以我们设计了很多规范标准,根据页面流量、效果收益去分配这些公共资源;同时,我们还通过架构设计、检测工具去感知业务的使用情况,避免业务不合理地使用某些优化手段。

记者:在这个过程中发生了哪些有意思的故事?

吴卓:印象最深刻的还是我们第一次进行 React Native 大版本升级——横跨了 6 个 React Native 的大版本。因为美团上有大量业务在使用 React Native,所以我们需要推动所有业务共计几百个 React Native 的页面配合做升级适配,其中难度可想而知。现在回想起来,确实做了件轰动全公司的事情,当时心里还是很慌的,团队都做好了低绩效的准备。不过,皇天不负有心人,最终推动完成了升级,取得了一个胜利。后来我们也研究出了兼容升级的方案,让业务能够平滑升级。

记者:你认为这个项目还有哪些想象空间?如果其他团队也想实践,你有什么建议可以给到他们吗?

吴卓:我们一直在关注 React Native 大重构的进展,包括 TurboModules 和 Fabric,相信等到 React Native 完成重构后性能可以再上一个台阶。到时候,React Native 的大版本升级又是个难题,这需要提前布局做准备。

如果其他团队也想实践,首先可以给大家一些信心,App、流程、页面级别的 React Native 化,我们已经有稳定的实践,可放心使用;再者,使用优化手段的技术实现,是很容易复制的。但是对于大型项目而言,还是需要根据各自的业务场景、以及公司环境状况制定合适的落地推进计划。

记者:React Native 无法专门针对移动端进行性能优化是一直存在的痛点问题,为什么没有选用 Flutter 框架?

吴卓:框架的技术选型源于业务背景。回到 2018 年立项之初,美团 App 包大小治理已经迫在眉睫,由于业务不断增长,从客户端层面出发的传统优化手段(如:资源压缩、重复代码清理等)已经赶不上业务增加的代码速度,必须采用动态化的方案进行解决。

React Native 的开源社区最为广泛,且业内已经有较多成熟的实践,在需要大规模使用的前提下我们预判使用 React Native 的成功性最大,当然数年之后的结果确实印证了当时选择的正确性。

而 Flutter 在 2018 年刚推出,在 iOS 侧还并不具备动态化能力,并且业内大规模使用的验证较少,所以不会贸然去选择 Flutter。当然,目前 Flutter 框架在公司内也有团队在使用,我们也在密切关注 Flutter 的发展。

记者:有人说 Flutter 拥有更丰富的内置支持、工具与说明文档选项,React Native 在开发高性能应用、DevOps 项目时,在应用开发与发布自动化 QA 测试支持等等方面都稍显劣势,对此您有什么看法?

吴卓:这些对比抽象来看,更多从开发者的角度出发对框架的易用性进行的对比。不得不承认,Flutter 作为后进者很多方面做的不错,但我认为这些优劣还不足以决定技术选型。

我们在使用这些开源框架时,一定是对应去解决业务上遇到的问题和挑战。当这些开源框架进入公司里应用并落地时,还需要根据业务的实际情况,基于开源的工具做进一步的建设和调整。 一个选型方法论就是,在公司应用落地时,优先考虑的应是框架能否解决实际问题,其次才是框架的成熟度、应用情况、技术天花板是否值得长期押注在这个框架上。

记者:当下跨平台开发已经成为业界一个大的研究课题,从 Hybrid 的方案到 React Native、Weex、再到 Flutter,技术框架纷繁复杂,那我们应该如何选择适合自己的跨平台开发框架呢?技术选型上需要注意哪些事项?

吴卓:开发框架的选型最终还是要回归到业务场景上。 跨平台开发框架的常见收益点包括:动态化能力、跨平台复用提效、技术栈统一等方面。我列举两个例子:

为了协调不同业务的开发,美团 App 划定了发版窗口,对业务而言发布效率成了业务的痛点,因此就有了动态化的诉求;倘若是一个自行掌控的 App,能够随时提审随时发布,动态化的诉求可能没那么高。

再比如公司内有些手持 PDA 设备,属于特别低端的 Android 机器。有的团队不考虑跨平台框架,一是没有 iOS 端的需求,二是设备性能较差,三是设备自带的更新机制比现有 React Native 基建的动态化效果更好。但有的团队仍然选择了跨平台框架,原因是短期内技术栈储备不够,只能先用团队最熟悉的 JS 进行需求开发,等人力补充到位后再视情况调整。

所以,在做技术选型时,还是从业务场景的现状决定,没有绝对好或者不好的框架。

记者:您认为未来跨平台开发会出现大一统的局面吗?

吴卓:我认为不会。因为技术有最佳实践,但是没有银弹。从原理上跨平台做得好,一定是在其他方面有取舍,比如性能、动态化能力、开发语言难度等等。从业务场景出发,都会有各自最适合的框架。 我并没有期待大一统的局面,更希望的是各个框架在各自场景下都能发展到极致。

记者:如果选用 React Native 框架,有哪些“坑点”需要注意吗?

吴卓:React Native 框架在业内使用较为频繁,下面列举几条必做的事情:

第一,虽然 React Native 使用前端语言开发,但是如果想让 React Native 发挥出更好的效用,则 需要客户端的同学一并参与维护。先前我们遇到的很多问题连调,光从前端 JS 层入手无法解决,需要深入到 Native 层进行排查。

第二,React Native 在 Android 侧健壮性稍差, 直接使用 Crash 率会比较高,需要自行修改源码,增加异常处理、特殊系统适配等操作。

第三,Android 侧 JSC 引擎性能不太好,改善方法是 尽可能升级到新的 React Native 版本(0.60+),然后将默认的引擎替换掉。

记者:对年轻化的前端、客户端开发人员有哪些建议么?

吴卓:我想这个问题每个人都有各自的见解,下面仅谈点个人经验。技术上的学习其实是个“T”型,中间的竖线代表深度,横线代表广度。我们需要优先专注于一个方向深入学习,比如:iOS、Android、FE 等等;当一个事情研究到足够深入的过程中,你会发现还有更多不知道的东西,需要你不断学习新的知识、拓宽看问题的广度。在前端、客户端领域,变化非常快,新框架层出不穷, 个人建议是专注于某个方向做到足够深入,同时也需要保持对其他方向的持续学习和关注。

嘉宾介绍:吴卓,美团移动端技术专家。2014 年加入美团,负责过酒店、机票、火?票业务客户端团队;目前是美团 React Native 项目负责人,负责美团内基于 React Native 的基础建设。

谷歌浏览器

检测到您谷歌浏览器版本()过低,建议升级到最新版本 立即升级
×

QQ浏览器

检测到您QQ浏览器版本()过低,建议升级到最新版本 立即升级
×

2345加速浏览器

检测到您2345加速浏览器版本()过低,建议升级到最新版本 立即升级
×

Firefox火狐浏览器

检测到您Firefox火狐浏览器版本()过低,建议升级到最新版本 立即升级
×

傲游浏览器

检测到您傲游浏览器版本()过低,建议升级到最新版本 立即升级
×

UC浏览器

检测到您UC浏览器版本()过低,建议升级到最新版本 立即升级
×

360浏览器

现有新的360浏览器最新版本更新,保护上网安全,建议更新安装。 立即升级
×

搜狗浏览器

现有新的搜狗浏览器最新版本更新,保护上网安全,建议更新安装。 立即升级
×