Flutter与React Native和Native的深度性能对比

比较日常较为流行的移动开发工具 FPS、CPU、Memory和 GPU之间的性能。

研究背后的故事

inVerita及其移动开发团队不断深入研究市场上可用的跨平台移动解决方案的性能,以回答哪种技术( Flutter 或 React Native(或 Native)甚至具有专业性的)是最适合你的产品,于是Flutter 与 React Native和 Native Part I之间就出现了性能对比。这个对比有些争议,因为 React Native很少用于日常的多项计算——可能正是由于这种情况,相比较而言,Flutter 或 Native APPs更能执行好CPU 繁重的任务。

这就是为什么在这篇文章中,我们决定研究对日常移动app用户有更大影响的UI性能。

测量UI性能的过程很复杂,它需要工程师在每个平台上都以同样的方式去实现相同的功能。为了避免争议,我们使用GameBench作为全局测试工具,确保我们保持客观公正(虽然运行大量React Native和Native项目但这并不能改变我们对Flutter的喜爱)。GameBench有很大的改进空间,在它的帮助下,我们成功地将每个App放入单个的测试环境中。

源代码是开放的,所以如果可以,请在实验后向我们分享你的想法。通常情况下,UI动画在不同的平台上使用的工具不同,所以我们把所有的东西都压缩到每个平台(除了一种情况)所支持的库中。测试结果取决于你的实现方法,我们相信,你,作为一个潜力型技术专家,可以将工具集推向极限,如果你成功了,我们会很高兴。现在,让我们来看看这些案例。

硬件信息:

这次测试,我们使用的是成本较低的小米红米Note 5和iPhone 6s。

Repo链接:

源代码

案例1 - 列表视图基准测试

我们在Android和iOS上使用Native、React Native和Flutter都得到了相同的UI。我们还在Android推送上使用RecyclerView.SmoothScroller实现了滚动速度的自动化;在iOS和React Native上,我们使用了一种带有定时器的方法,并以编程方式进行滚动定位;在Flutter上,我们使用ScrollController平滑滚动列表。每一种情况的列表视图中都有1000个项目,滑到列表底部的滚动时间是相同的;并且我们都使用了图像缓存,每个平台都有不同的libs。更多的细节可以在源代码中找到。

在以下情况下使用的第三方库:

iOS

  • 加载和缓存图像 - Nuke

安卓

  • 加载和缓存图片 - Glide

React Native

  1. 所有测试结果都接近相同的FPS。
  2. 与Flutter和React Native相比,Android Native只用了一半的内存。
  3. React Native需要最大程度使用CPU。原因是在JS和Native代码之间使用JSBridge,导致序列化和反序列化的资源浪费。
  4. 关于电池的利用,Android Native的结果最好。React-native则落后于Android和Flutter。在React Native上运行连续动画会消耗更多的电量。

iPhone 6s测试


测试结果

  1. FPS. React Native由于无法在iOS上使用IoT编译,导致结果比Flutter和Swift稍逊一筹。
  2. 内存。Flutter在内存消耗方面几乎与原装的相匹配,但CPU上仍较占内存。React Native在这项测试中远远落后于Flutter和native。
  3. Flutter和Swift之间的差异。Flutter积极使用CPU,而iOS Native使用GPU。Flutter中的调和增加了CPU上的负载。

案例2 - 重型动画测试

如今,大多数Android推送和iOS的手机都有强大的硬件。在大多数情况下,在使用通常的商业app时,我们不会注意到帧数下降。这就是为什么我们决定做重型动画的测试,重到足以让帧数明显下降。我们在Android、iOS和React Native上使用Lottie制作的矢量动画,并在Flutter上使用用Flare制作的相同动画。

用Lottie在Android、iOS、React Native和Flutter的Flare测试动画。

%E6%9C%AA%E5%91%BD%E5%90%8D_%E5%89%AF%E6%9C%AC
安卓版Lottie


测试结果


测试结果

  1. Android和React Native在性能上有相似之处。这很明显,因为React Native的Lottie使用Native手段(16-19%的CPU,30-29FPS)。
  2. Flutter的结果让人大吃一惊,虽然它在性能上有一点搞砸了(12%的CPU和9FPS)。

我们发现,从网格中删除一个特定的动画会使Flutter的FPS增加到40%。Flare更大一些,因为没有针对这种任务进行优化,所以Flutter的FPS才会下降。

原因如下:

1_ayP4JATCcaXWxBo-M6GBUw

安卓版的Lottie

  1. Android推送需要的内存最少(205 Mb);React Native需要280 Mb,Flutter需要266 Mb。

  2. 冷启动App。根据这个指标,Flutter领先(2秒),而Android Native和React Native需要4秒左右。

iOS

  1. iOS和React Native在这个测试中的结果几乎与Lottie相同,因为React Native使用的是原生手段。
  2. Flare和Flutter不断刷新人们的认知。Flare还有一段路要走 :smiley:
  3. iOS Native需要的内存最少(48 Mb)。React Native需要135 Mb,Flutter需要117 Mb。
  4. 冷启动应用程序。按照这个指标,Flutter领先(2秒)。对于iOS和React Native则需要10秒左右。

Take note: we used a different library for this case with Flutter which is much heavier compared to those we used for other platforms and it might be the reason for fps drops.

注意: 在这种情况下,我们使用了不同的Flutter库,与我们用于其他平台的库相比,它要重得多,这可能是帧数下降的原因。

案例3–用旋转、缩放和渐变进行更重的动画测试。

在这个测试中,我们对各自200张图片做动画时的性能做出比较。缩放、旋转和渐变的动画是同时进行的。

%E6%9C%AA%E5%91%BD%E5%90%8D_%E5%89%AF%E6%9C%AC
200张图像


测试结果

Android

  1. Native表现出超强的性能和最有效的内存消耗。
  2. Flutter也展示出足够的性能方便工作,但与Native相比,它的内存消耗要多出两倍。
  3. 相比较而言,React Native在这种情况下的性能较低。


测试结果

iOS

  1. iPhone 6s足够强大,在3种情况下都不会下降fps。
  2. Native占用的资源较少,主要使用GPU。
  3. React Native主要使用CPU进行渲染,而Flutter使用GPU。
  4. React Native使用的内存更多一些。

总结

对于一般的商业App,只需带有少量的动画和闪亮的外观,技术就不是十分必要的。但如果你要做一些繁重的动画,要记住,Native的性能最强,然后是Flutter和React Native。我们绝对不建议在CPU重度操作中使用React Native,而Flutter从CPU和内存的角度来看都非常适合此类任务。

选择的工具取决于你具体的产品和商业案例。如果你想开发一个单一平台的MVP–使用原生手段,但要记住,Flutter App可以在移动、网络和桌面环境中构建,而且感觉Flutter可能在不远的将来成为跨平台开发的王者,因为即使在今天,Flutter也为原生开发工具创造了一个非常友善的竞争,特别是如果你的开发预算不是太紧张,但仍希望你的App在不同平台上有着体面的性能时。

我们要面对的是,现实中可能存在很多影响各项技术的实施和基准的因素,在座的各位可能是某一领域平台的真正专家,并都能从心爱的一套工具中汲取更多的东西。我们试图通过为每个App创建一个单一的环境来进行测试,并使用一套工具来衡量性能,从而为这个过程带来最大透明度。希望你们会喜欢这个结果,我们的移动和Flutter团队欢迎各位发表你的反馈和建议。

你也可以在这里查看这篇文章。

原文作者 inVerita
原文链接 https://medium.com/swlh/flutter-vs-react-native-vs-native-deep-performance-comparison-990b90c11433

推荐阅读
作者信息
AgoraTechnicalTeam
TA 暂未填写个人简介
文章
131
相关专栏
精选文章
82 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和 Agora 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。