写点什么

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

2020 年 7 月 08 日

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

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 年 7 月 08 日 20:007745

评论 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
回复
没有更多了
发现更多内容

LeetCode题解:239. 滑动窗口最大值,单调队列,JavaScript,详细注释

Lee Chen

LeetCode 前端进阶训练营

程序的机器级表示-数组的分配和访问

引花眠

计算机基础

Spring 5 中文解析测试篇-Spring测试

青年IT男

Spring5 JUnit

Golang Package sync 透析

卓丁

golang sync

3. 站在使用层面,Bean Validation这些标准接口你需要烂熟于胸

YourBatman

Hibernate-Validator Bean Validation 数据校验

阿里巴巴发布国内首个公益区块链标准 用技术让公益公开透明

CECBC区块链专委会

区块链 公益

从湖南“软硬兼施”,管窥三湘水畔的智能浪潮

脑极体

用 Python 实现一个简易版的 Pong 游戏 (一)

Matrix Chan

Python Turtle Python游戏

不支持原子性的 Redis 事务也叫事务吗?

海星

Java redis 事务

你问我答:容器平台改造后的安全是如何解决的?

博云技术社区

云计算 容器 微服务 PaaS 博云

usdt支付系统开发|承兑商支付跑分系统搭建

WX13823153201

usdt支付系统开发

[翻译] Go Concurrency Patterns: Pipelines and cancellation[Go并发模式]

卓丁

channel pipeline

ARTS打卡 第15周

引花眠

微服务 ARTS 打卡计划

实战解读丨Linux下实现高并发socket最大连接数的配置方法

华为云开发者社区

Linux TCP socket 高并发

一点思考|工作十几年了,竟从未用过do-while!

王磊

Java

读后感之《任正非:以客户为中心》

王新涵

Go: gops如何与Go运行时交互?

陈思敏捷

go golang gops

翻转链表,机器学习视觉训练,对数据的人工标注,使信息丢失,John 易筋 ARTS 打卡 Week 16

John(易筋)

学习 ARTS 打卡计划 翻转链表 Google论文评判人工预处理 大数据架构Spark

用函数式写法精简Java代码的一个例子

Sean

Java 函数式编程

usdt跨境入金支付系统搭建|区块链跑分系统开发

WX13823153201

区块链交易所搭建技术方案|去中心化交易所开发

WX13823153201

区块链交易所搭建

给大家介绍下,这是我的流程图软件 —— draw.io

程序员小航

工具 流程图 draw.io drawio-desktop 画图软件

学习 Java,有什么书籍推荐?学习的方法和过程是怎样的?

沉默王二

Java 学习 程序员 书单

数字货币交易所开发方案|去中心化交易所搭建

WX13823153201

数字货币交易所开发

oeasy教您玩转linux010206 蒸汽机车 sl

o

给DevOps加点料——融入安全性的DevSecOps

陈琦

DevOps 运维 测试 开发 安全性

架构师训练营第十三周总结

张明森

握草,你竟然在代码里下毒!

小傅哥

Java 程序员 小傅哥 bug 有毒代码

有奖征文重磅来袭,来!一起玩把大的!

小红豆

ARTS Week15

时之虫

ARTS 打卡计划

深入理解JVM垃圾回收机制 - GC Roots枚举

NORTH

GC Roots枚举 安全点 安全区域 OopMap

微服务架构下如何保证事务的一致性

微服务架构下如何保证事务的一致性

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