移动端各技术栈现状

1.行业现状

        今年3月初，随着flutter2.0正式发布，flutter web也进入了stable状态，这无疑又一次吸引了无数开发者的目光。细数移动端技术的发展，我们会发现在我们在追求“write once, run every where”的同时，性能方面的表现，越来越多的成为我们在技术选型上的偏重考虑项。此外，电商领域的移动端开发，从来都有需求周期短、动态化要求高的特点。因此作为当下的移动端开发者，高效率、跨平台是我们技术能力的发展路线上需要重点关注的。

        今天，我们就来拿目前比较火的几种移动端技术栈的各项数据来对比一下，以便我们对于当下各种能力有一个大概认识。同时，也为我们大家后续开发需求时的技术选型形成参考。

2.京麦App现状

        flutter自2018年12月1.0版本推出，行业上就一直在拿它与“learn once,write every where”的React Native进行对比。2年多下来，React  Native的热度在逐渐下降，从近两年的google搜索对两个关键词的趋势比较来看，React Native由于flutter的出现，基本上失去了先前所划定的势力范围。

Google Trends

        京麦App也是在2021年初随着最后一个React Native相关业务的下线，彻底移除了React Native的支持，移除之后京麦App所支持的技术栈分别为：原生、Flutter、小程序、H5，也就是我们今天做技术对标的成员。

如何做的此次技术对标

1.行业对标

        在京麦的发展过程中，京东App一直是我们的标杆，所以我首先调查了一些京东App的数据，来窥探个大概：

        这里小程序是没有数据的，因为经跟小程序团队沟通，截至发稿前小程序的监控数据仍在建设中。这样来看的话，在京东App内部flutter和原生页面是比较接近的，而且首屏这块耗时的均比H5的体验要好些，同时我还发现通过flutter开发的模块再正逐渐增多。

        接下来，是行业上跟京麦有着类似属性的App的概况，这里我选取了某牛、某多多，以及我们京东内部两款App：

对比下来我们发现：

• 某牛：插件H5迁移到小程序过程中，客户端有段时间没更新了，从当前的趋势来看，在逐步加码小程序。

• 某多多：原生居多，商品管理为H5插件，这可能也是商家反馈多多体验好的一个缘故吧。

• 商羚：flutter居多，订单插件为原生。这里也是跟商羚同事简单聊了一下，为什么单单订单插件使用了原生开发，得到的答案是第一次使用flutter开发，多少有些顾虑和担心，所以重新选择的话，还是愿意使用flutter进行开发，毕竟从效率方面是有优势的。

• 印尼商家版：插件均为原生开发；

2.京麦App测试数据

        前面进行了一些基础的调研，接下来将从加载耗时、首屏渲染、启动耗时、占用内存、滑动时的帧率测试这几个方面展开；其中像启动这项指标，我们还进行了更细的区分。因为像小程序这样的技术栈，冷启动是需要对包进行下载的，我们进行了冷启动和热启动的区分，以方便我们详细了解各项指标在不同情况下的表现。

        这里还需要说明一下的是，测试场景我们取的是京麦App里面服务市场页面，因为这个页面一开始是H5进行开发的，后来为了提高首页的用户体验native化了，另外这个页面还存在一个小程序版的，这是为了保证一些场景下体验的一致性。这样的话，相当于我们只需开发一个flutter版的小程序页面，便可以在场景这个维度上，保持一致性，服务市场页面如下：

 1）小程序测试数据

• 首屏渲染速度快，与原生没有太大区别；

• 热启动优秀，冷启动以及包有更新的情况下由于有下载包的因素，用户有等待时间；

• 内存方面比H5稍占内存，由于同样依赖WebView，再加上小程序框的因素；

        从表中可以看到下载的因素对于首次加载的用户体验，影响还是挺大的，那具体来说一个小程序包大概能有多大呢？我们来看下京麦App内已上线的小程序大小一览：

        最大的有15.6M，最小的为658k。同时在4G网络和公司网络下，我们大概测算了下下载的耗时，总的来说：正常网络下如果超过5M，用户加载时间就会超过5S了。

2）H5测试数据

在同时开启本地缓存的基础上，多次测试的结果为：

• H5页面冷启动和热启动在高端机上有较为明显差距；

• 快速滑动状态下略有卡顿；

3）原生和Flutter测试数据

        原生页面与flutter页面的测试数据放到了一起，因为二者的数据测算有很多相似的地方，首先是原生的：

             flutter:

总结下来：

• Flutter引擎对于内存的占用不可忽视；

• Native和flutter无论是冷启动和热启动，均有明显优势

4）数据汇总

        接下来进行比较关心的启动和帧率横向数据汇总，首屏耗时我们这里把所有启动时间的最大值和最小值进行了用户感知层面的评估：

        我们都知道，我们开发App的帧率性能目标就是保持在60fps，也就是说我们在进行App性能优化时心中要有如下准则：换算关系为60帧/秒即16ms/帧；

        从我们测算的数据来看，由于H5和小程序都依赖客户端的重型组件WebView，H5偶有卡顿，小程序在16ms左右徘徊，原生和flutter基本都能保持在16ms的标准以下。

        最后 ，我们加上动态化和包大小影响的因素再来整体看一下：

    性能、流畅度：Native>flutter>小程序>H5

    动态能力：H5>小程序>flutter>Native

    占用内存：Native>flutter>H5>小程序

    包大小：Native ≈H5>flutter≈小程序

总结

做这些测试是为了给我们做技术选型给出参考，结合竞品对比数据以及测试数据，建议如下：

• 聊天场景等对时效和体验要求高的场景，或者用户高频操作插件，native、flutter开发；

• 更新频繁的插件小程序开发；

• 低频操作插件、活动场景H5开发；