React Native VS Flutter评测

以前分别用iOS原生和Flutter写了一个空气质量App并对它们对性能、容量等作了 对比评测. 不少小伙伴在下方留言说这样的对比没有意义, 认为Flutter根本不是用来替代原生也不可能超越原生开发. 我这里先作一个解释:

我在对比评测中提供了尽量多的数据, 并非想证实Flutter和原生比有多烂, 而是想告诉你若是选择了Flutter你的App包会增加多少倍、对App启动速度的影响会有多少秒, 好让你们未来在定技术栈的时候可以尽可能心中有数.

固然也有网友提出和应该React Native来作对比, 毕竟这两个都是主攻跨平台开发. 其实我早就想作一个相似的对比评测, 前段时间公司出现变更, 周末可贵抽空作了一个React Native版的Demo, 最终得出了今天这份评测报告.

Aireport(iOS原生)

Aireport Flutter(Flutter版)

RN版还在审核中, 你们能够自行下载体验一下.

1.安装包大小

Flutter应用安装包和安装后容量

React Native应用安装包和安装后容量

这个差距, emmmmmm, 这里给出iOS原生版应用的大小大约在2.47MB, 也就是说RN已经作到了比原生还要小的安装包. 这主要归功于两点:

• 基于iOS自带的UI框架而非Flutter这样的自有框架(Flutter SDK有30MB左右)
• RN最终转换的代码为OC而对比的原生应用使用了Swift编写(本次预测大失败, Swift5并无随着WWDC放出, 也就没能集成到iOS12中....)

React Native较小的安装包带来的优点不只是下降了下载门槛、减小了磁盘占用, 并且对于混合开发的压力也更小. 试想一个原生App由于几个页面使用了Flutter, 一行代码没写安装包就凭空增长了30MB, 这样的结果不是开发人员但愿看到的.

2.启动速度

启动速度RN依然与原生不相上下, 而且要比Flutter好上一个等级. RN虽然使用js来构建应用程序, 但最终RN会使用js来调用成原生代码生成原生UI控件. 至于Flutter, 正如我以前的评测中说的, 其App启动的过程包含一个原生App启动过程直至第一个原生VC初始化过程+Flutter运行时环境的初始化过程, 这个过程无疑拖累了Flutter的最终结果.

3.内存占用

内存占用方面, RN显然没有原生作的好, 与Flutter的差距也不大, 并且经测试发现, RN的内存占用不是很稳定, 页面刚生成的时候内存占用会高一点, 以后缓慢回落.

经过Xcode工具咱们能够看到, RN(React Navigation)并无使用iOS系统的导航系统, 而是以一种相对粗暴的形式直接覆盖在了上一个View上. 相反iOS原生系统的页面切换会在新页面显示完毕后将前一个页面去掉(不作渲染), 这样能够有效节省内存的消耗. 此外, RN的控件也没有使用UIKit中的现有组件, 而是经过最基本的UIView去组合模仿(好比NavigationBar). 这样作虽然能够减小安卓和iOS之间UI层的差别, 但显然优化的空间就变小了.

4.流畅度

React Native帧率

Flutter帧率

iOS原生帧率

咱们能够看到, RN得益于UIKit的加持, 总体流畅度和原生很是接近, 比声称60帧的Flutter要好. 尤为是搜索页滚动的帧率. 可是在页面切换(红色区域)时漏出了马脚, 缘由就在于上面提到的, RN并无使用系统自带的导航系统, 而是本身作了一个相似的平移动画. 很惋惜, 这个动画并无跑满60帧, 但也要比Flutter好一点.

观察动画的时间和曲线能够发现, 原生的跳转动画时间更长, 但他的加速效果也是最好的, 其余两个平台的跳转动画就略显生硬.

最后能够分别观察一下CPU的占用, RN的表现能够说是很是好了, 尤为是在TableView滚动的时候, 其缘由也很简单, 它没有使用reuse pool, 所以不须要频繁修改已存在的Cell, 坏处是随着Cell的增多, 内存压力也会愈来愈大.

5.iOS特性支持

因为最后仍是用原生语言去实现, RN先天能够获得iOS的部分特性. 并且相比于Flutter, 线上热更新才是它真正的杀手锏. Flutter虽然理论上能够实现, 但部署起来还有不少的问题须要解决, 一切仍是未知数. 此外, RN和Flutter都支持混编, 这就几乎解决了实现上的全部问题. 惟一的问题是, 有多少功能和特性须要用原生去实现, 这样的维护成本又有多高.

最后的最后仍是要说一下, Flutter目前还在测试版, 不建议在生产环境使用, 所以以上作出的对比并不能表明Flutter最终的真实水平. 但能够预见, 在短时间内Flutter仍是没法撬动RN在跨平台开发中的地位, RN仍旧是目前跨平台开发的最优解. 但不能否认Flutter确实实现了Write Once,Run Anywhere, 只不过至少在Fuchsia出来以前, 咱们都没法完整评估它的真实价值.

最后给出GitHub地址:

Aireport(iOS原生)

Aireport(Flutter版)

Aireport(React Native版)