AIGC 应用、数据分析等企业 10+ 热门专题课,就在极客时间企业版>>> 了解详情
写点什么

Flutter vs React Native vs Native:深度性能比较

  • 2020-07-08
  • 本文字数:4076 字

    阅读完需:约 13 分钟

Flutter vs React Native vs Native:深度性能比较

AI 大模型超全落地场景&金融应用实践,8 月 16 - 19 日 FCon x AICon 大会联诀来袭、干货翻倍!

Flutter 是 Google 开源的移动用户界面框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面,正在被全球越来越多的开发者和组织使用。而 React Native(简称 RN)是 Facebook 开源的跨平台移动应用开发框架,是 Facebook 早先开源的 JS 框架 React 在原生移动应用平台的衍生产物,支持 iOS 和安卓两大平台。至于 Native,就是传统的原生 App 开发模式。那么问题来了,在这三种开发技术,我们该如何进行选型呢?本文将对这三种开发方案的性能进行深度对比,包括它们在多个应用场景下 FPS、CPU、内存和 GPU 方面的性能。希望对读者有所帮助。


本文最初发表在 Medium 博客,经原作者 inVerta 公司授权,由 InfoQ 中文站翻译并分享。

研究背景

inVerita 及其移动开发团队不断深入研究市场上可用的跨平台移动解决方案的性能,以回答这样一个问题:对于你的产品,甚至是你的职业生涯来说,Flutter、React Native(或 Native),哪种技术是最好的?这就是文章《Flutter vs React Native vs Native:性能考察》的由来。是的,这篇文章引发了一些争议,因为有人认为,我们并没有使用 React Native 每天进行很多次计算,但如果是这种情况,CPU 占用率较高的任务由 Flutter 或 Native app 来完成会更好。


这也是为什么在本文中,我们决定研究用户界面的性能,因为它对移动应用程序的普通用户影响更大。


衡量用户界面性能很复杂,它需要工程师在每个平台上以相同的方式实现相同的功能。我们选择了 GameBench 作为全局测试工具,以确保我们能够保持客观(这并不会改变我们在很多方面喜爱 Flutter 这一事实,并且我们也运行着大量 React Native 和 Native 项目)。尽管 GameBench 还有很大的改进空间,但是,在它的帮助下,我们还是成功地将每个应用程序放入一个单独的测试环境中,这也是我们的目标。


源代码是开源的,因此,如果你愿意的话,可以自己做实验并与我们分享你的想法。用户界面的动画通常在不同的平台上使用不同的工具,所以我们将范围限制在每个平台(只有一种情况除外)都支持的库中,或者至少我们已经尽己所能来实现这一点。现在,让我们来看看这些用例。


硬件信息:为完成这项测试,我们使用了价格实惠的手机:红米 Note5 和 iPhone 6S。


GitHub 链接


https://github.com/InVeritaSoft/Mobile_frameworks_UI-benchmarks

用例 1:列表视图基准测试

我们使用 Native、React Native 和 Flutter 在 Android 和 iOS 上实现了相同的用户界面。我们还使用 RecyclerView 实现了滚动速度的自动化。在 Android 上我们使用 SmoothScroller;在 iOS 和 React Native 上,我们使用了一种定时器和以编程方式滚动到位置的方法;在 Flutter 上,我们使用 ScrollController 来平滑地滚动列表。在每种情况下,我们在列表视图中都有 1000 个项目,并且都使用同样的滚动时间才能到达最后一个列表元素。在每种情况下,我们在每个平台上使用不同库的图像缓存。更多的细节可参阅源代码

本案例使用的第三方库:

iOS


  • 加载和缓存图像:Nuke


Android


  • 加载和缓存图像:Glide


React Native



测试结果:

Android

GPU 测试结果不受基准测试的支持(不幸的是,这样的设备我们还有很多)



  1. 所有测试都显示 FPS 大致相同。

  2. 与 Flutter 和 React Native 相比,Android Native 使用的内存只有一半。

  3. React Native 需要最大程度的 CPU 利用率。原因是在 JS 和 Native 代码之间使用 JSBridge,这会导致在序列化和反序列化上资源的浪费。

  4. 在电池开发方面,Android Native 取得了最好的结果。React Native 落后于 Android 和 Flutter。在 React Native 上运行连续动画会消耗更多的电池电量。

iOS


  1. FPS:React Native 的结果比 Flutter 和 Swift 更差。原因是无法在 iOS 上使用 IoT 编译。

  2. 内存:Flutter 在内存消耗上方面基于与原生方式相当,但在 CPU 的占用率仍然较高。在这项测试中,React Native 远远落后于 Flutter 和 Native。

  3. Flutter 和 Swift 之间的区别:当 iOS Native 正在使用 GPU 时,Flutter 正在使用 CPU。Flutter 中的协调增加了 CPU 上的负载。

用例 2:重动画测试

如今,大多数 Android 和 iOS 手机的硬件配置都很强大。在大多数情况下,使用普通应用,FPS 的下降并不会引人注意。这就是为什么我们决定用重动画进行一些测试。这些动画重到足以让 FPS 下降到引人注意的地步。我们在 Android、iOS、React Native 上使用 Lottie 制作的矢量动画,并在 Flutter 上的 Flare 采用了同样的动画。


使用 Android、iOS 和 React Native 版的 LottieFlutter 的 Flare 测试动画。



Android 上的 Lottie



Android 测试结果



iOS 测试结果


Android

  1. Android 和 React Native 在性能上表现相似,这是显而易见的,因为 React Native 版的 Lottie 使用了原生方式(CPU 占用率 16~19%,FPS 为 30~29)。

  2. Flutter 的结果令人惊讶,尽管它在性能演示中有点搞砸了(CPU 占用率为 12%,FPS 为 9)。

  3. 我们发现,从网格中删除一个特定的动画,会让 Flutter 上的 FPS 最高提高 40%。我们认为 Flare 更重,并且没有针对这类任务进行优化,这就是为什么 Flutter 获得如此高的 FPS 下降。

  4. Android 需要的内存最少(205MB),React Native 需要 280MB,Flutter 需要 266MB。

  5. 应用程序冷启动。Flutter 在这个指标上表现最好(2 秒),而 Android Native 和 React Native 大约需要 4 秒钟。

iOS

  1. iOS 和 React Native 在这个测试中的结果几乎与 Lottie 的 React Native 使用原生方式相同。

  2. Flare 和 Flutter 依然让人惊讶,Flare 肯定还有一段路要走。

  3. iOS Native 需要的内存最少(48MB),React Native 需要 135MB,Flutter 需要 117MB。

  4. 应用程序冷启动。Flutter 在这个指标上表现最好(2 秒),而 iOS 和 React Native 大约需要 10 秒钟。


请注意:在这个用例中,Flutter 用了一个不同的库,与我们在其他平台上使用的库相比,这个库要重得多,这可能是导致 FPS 下降的原因。

用例 3:更重的动画测试:旋转、缩放和淡入淡出。

在这项测试中,我们比较了 200 张动图的动画性能,缩放、旋转和淡入淡出同时执行。



200 张动图



Android 测试结果


Android

  1. Native 显示了最高的性能及最高效的内存消耗。

  2. Flutter 性能表现不错,但相比 Native,内存开销增加了两倍多。

  3. React Native 在这种用例中表现不佳。



iOS 测试结果


iOS

  1. iPhone 6S 足够强大,在所有这 3 种用例中,FPS 都不会下降。

  2. Native 占用的资源较少,而 GPU 占用率最多。

  3. React Native 主要使用 CPU 进行渲染,而 Flutter 使用 GPU。

  4. React Native 占用了更多的内存。

总结

对于一般的应用来说,小型动画和炫酷的外观,选择哪种技术根本不重要。但如果要做一些重动画的话,请记住,Native 具有最强的性能。其次就是 Flutter 和 React Native。我们绝对不推荐在 CPU 占用率很高的操作中使用 React Native,而 Flutter 非常适合这种任务,无论是从 CPU 还是内存的角度。


选择哪种工具要取决于具体的产品和业务案例。如果你想开发一个单一平台 MVP——使用原生方式,但请记住,Flutter 应用程序可以同时为移动、网络和桌面环境而构建,而且我们有预感,Flutter 在不久的将来有望成为跨平台开发的王者,因为即使在今天,Flutter 也是原生开发工具一个非常不错的竞争对手,特别是如果你的开发预算不是太紧张,但你仍然想为应用程序谋求良好性能的话。


我们面对的事实是,可能会有很多因素影响每个技术的实施和基准,而你们中的许多人,可能是某个特定平台的真正专家,可以从心爱的工具集中获取更多的好处。我们试图通过为每个应用创建一个单一的测试环境,以及一套单一的工具来衡量性能,从而将尽可能提高整个过程的透明度,我希望你喜欢我们这样得到的结果。


原文链接:


https://medium.com/swlh/flutter-vs-react-native-vs-native-deep-performance-comparison-990b90c11433


2020-07-08 20:0012437

评论 4 条评论

发布
用户头像
用例3的Android比较第二点,原文是"Flutter showed just enough performance to work comfortably but twice more memory expenses comparing to Native.",是不是翻译错了?
2020-07-14 18:38
回复
确实,没有提到FPS,多谢指正
2020-07-15 08:49
回复
用户头像
有点诡异,Flutter不是用的Skia和Dart实现的动画和界面?怎么CPU,内存损耗更多,FPS却没高多少。是不是说明Android的Java原生开发的界面比Flutter开发的界面性能高?
2020-07-14 12:06
回复
我也想知道这个,在重动画场景下,flutter的fps为什么会这么低
2020-07-24 18:51
回复
没有更多了
发现更多内容

进击的程序员,如何提升研发效能?|直播预告

万事ONES

中国游戏的“外卷”大时代,中小厂商如何破解出海难题?

Geek_2d6073

智能制造的下一站:云原生+边缘计算双轮驱动

York

云原生 边缘计算 工业互联网 云边端协同

Vue-16-表单绑定

Python研究所

6月月更

云原生监控系统·夜莺近期新功能一览,解决多个生产痛点

龙渊秦五

云原生 Prometheus Nightingale 运维监控

招募令|数据可视化开发平台“FlyFish”「超级体验官」招募啦!

云智慧AIOps社区

前端 前端开发 低代码 数据可视化 可视化开发

自助洗车到底有哪些不一样的地方

共享电单车厂家

自助洗车加盟 24小时自助洗车

大数据培训flink之电商用户行为项目整体介绍

@零度

flink 大数据开发

Uniswap去中心化交易所系统开发方案

开发微hkkf5566

华为云发布桌面IDE-CodeArts

华为云开发者联盟

云计算 开发工具 华为云 代码补全

集成底座方案演示说明

agileai

集成底座 企业服务总线 统一身份管理平台 主数据管理平台 方案演示

NFT卡牌链游系统开发详情分析

开发微hkkf5566

去中心化挖矿LP流动性DAPP系统开发案例

开发微hkkf5566

北京web前端培训 | React全家桶之入门介绍

@零度

React web前端开发

依靠可信AI的鲁棒性有效识别深度伪造,帮助银行对抗身份欺诈

易观分析

AI

站在数字化风口,工装企业如何"飞起来"

华为云开发者联盟

云计算 低代码 开发 华为云

天天在都在谈的S3协议到底是什么?一文带你了解S3背后的故事

wljslmz

对象存储 S3 6月月更

《网络是怎么样连接的》读书笔记 - FTTH

懒时小窝

网络编程

为什么要做茶叶商城小程序app开发?

开源直播系统源码

软件开发 一对一源码 小程序商城

AutoK3s v0.5.0 发布 延续简约和友好

Rancher

Kubernetes k8s rancher

2022年Q1手机银行用户规模达6.5亿,加强ESG个人金融产品创新

易观分析

手机银行

Hoo虎符研究院|6月上半月区块链行业投资机构动向

区块链前沿News

Hoo虎符 Hoo

MAUI与Blazor共享一套UI,媲美Flutter,实现Windows、macOS、Android、iOS、Web通用UI

沙漠尽头的狼

C# MAUI Blazor Blazor Server Blazor WebAssembly 跨平台UI

Move Protocol Beta测试版再调整,扩大总奖池

股市老人

更新视图——基于函数的视图 Django

海拥(haiyong.site)

Python django 6月月更

GraalVM 与 Spring Native 项目实现链路可观测

观测云

撰写有效帮助文档的7大秘诀

小炮

Ares阿瑞斯i质押LP挖矿众筹模式dapp智能合约定制

开发微hkkf5566

天天预约排队助手|使用手册

天天预约

小程序 SaaS 排队 生活服务工具 使用手册

Move Protocol Beta测试版稳定,临时决定奖池规模再扩大

EOSdreamer111

Move Protocol Beta测试版稳定,临时决定奖池规模再扩大

西柚子

Flutter vs React Native vs Native:深度性能比较_语言 & 开发_InVerita_InfoQ精选文章