欧博allbet注册:Flutter vs React Native vs Native:深度性能对照

admin 4个月前 (07-02) 科技 49 0

老孟导读:这是老孟翻译的付费文章,文章所有权归原作者所有。

迎接加入老孟Flutter交流群,每周翻译2-3篇付费文章,精彩不容错过。

原文地址:https://medium.com/swlh/flutter-vs-react-native-vs-native-deep-performance-compARison-990b90c11433

让我们对照盛行的移动开发工具在一样平常生涯中的FPS,CPU,内存和GPU性能。

研究背后的故事

inVerita及其移动开发团队不停研究市场上提供的跨平台移动解决方案的性能,以回覆哪种手艺最适合您的产物,是 Flutter 或 React Native(或 Native)甚至是职业(原文是:maybe even career),这就是 Flutter vs React Native vs Native 第一篇文章泛起的缘故原由。是的,这颇有争议,由于有人可以说我们不是天天使用React Native举行多次盘算(可能是这种情形),然则在这种情形下,Flutter或Native应用程序可以更好地执行CPU繁重的义务。

因此,在本文中,我们决议研究UI的性能,该性能对一样平常使用移动应用程序的用户影响更大。

权衡UI性能很庞大,这求工程师在每个平台上以相同的方式实现相同的功效。我们将 GameBench 作为测试工具,并确保我们保持客观性(这并没有改变我们在许多方面都异常喜欢Flutter的事实:),而且仍在运行许多React Native和Native项目)。 GameBench有许多改善空间,但我们的目的是想法将每个应用程序置于一个测试环境中。

源代码是开放的,因此请实验并与我们分享您的想法。 UI动画通常在差别平台上使用差别的工具,因此我们将所有内容都缩小到每个平台支持的库中(但只有一种情形),或者至少我们做了能够做到的一切。测试效果可能会有所差别,而且取决于您的实行方式,我们赖您作为特定手艺的潜在真正专家可以将您的特定工具集推到极限,使其跨越我们的数目,若是您这样做,我们将异常喜悦。现在,让我们看一下案例。

硬件信息:

为了举行测试,我们使用了价格合理的小米RedMi Note 5和iPhone 6s。

堆栈地址

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

用例1 —列表视图基准

我们使用Native,React Native和Flutter在AndroidiOS上实现了相同的UI。我们还使用Android上的RecyclerView.SmoothScroller来自动化转动速率。在iOS和React Native上,我们使用了带有计时器的方式,并以编程方式转动到位置。在Flutter上,我们使用ScrollController平滑转动列表。在每种情形下,我们在列表视图中都有1000个项目,而且转动时间相同以到达最后一个列表元素。在每种情形下,我们都使用每个平台具有差别库的图像缓存。更多细节可以在源代码中展现。

在这种情形下使用的第三方库:

iOS:

  • 加载和缓存图像 — Nuke

Android:

  • 加载和缓存图像 — Glide

React Native

  • 加载和缓存图像— React-native-fast-image

欧博allbet注册:Flutter vs React Native Native:深度性能对照 第1张

  1. 所有测试均显示出大致相同的FPS。
  2. 与Flutter和React Native相比,Android Native使用的内存只有一半。
  3. React Native需要最多的CPU开发。缘故原由是在JS和本机代码之间使用JSBridge,这会导致序列化和反序列化方面的资源虚耗。
  4. 关于电池开发,Android Native具有最佳效果。 React-native落后于Android和Flutter。运行延续动画会在React Native上消耗更多电池电量。
iPhone 6s test

欧博allbet注册:Flutter vs React Native Native:深度性能对照 第2张

  1. FPS,React Native的效果比Flutter和Swift差。缘故原由是无法在iOS上使用IoT编译。
  2. 内存。 Flutter与Native在内存消耗上险些一样,但在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 使用 Lottie 动画,Flutter 使用 Flare。

欧博allbet注册:Flutter vs React Native Native:深度性能对照 第3张

欧博allbet注册:Flutter vs React Native Native:深度性能对照 第4张

欧博allbet注册:Flutter vs React Native Native:深度性能对照 第5张

Android
  1. Android和React Native在性能上有相似之处。很明显,由于Lottie for React Native使用内陆方式(16–19%CPU,30–29 FPS)。
  2. Flutter的了局令人惊讶,在演出中有点糟。 (12%的CPU和9 FPS)。

我们发现从网格中删除一个特定的动画会使Flutter上的FPS最高提高40%。我们以为Flare较重且未针对此类义务举行优化,这就是Flutter导致FPS下降的缘故原由。

怪这一个:

欧博allbet注册:Flutter vs React Native Native:深度性能对照 第6张

  1. Android需要最少的内存(205 Mb); React Native需要280 Mb,Flutter需要266 Mb。
  2. 冷启动应用程序。根据此指标,Flutter处于领先地位(2秒)。对于Android Native和React Native,约莫需要4秒钟。
iOS
  1. iOS和React Native在此测试中的效果险些与Lottie for React Native使用内陆方式相同。
  2. Flare和Flutter不会令人惊讶。Flare 另有很长的一段路要走。
  3. iOS Native需要最少的内存量(48 Mb)。 React Native需要135 Mb,Flutter需要117 Mb。
  4. 冷启动应用程序。根据此指标,Flutter处于领先地位(2秒)。对于iOS和React Native,约莫需要10秒钟。

请注意:在这种情形下,我们为Flutter使用了一个差别的库,该库比我们在其他平台上使用的库重得多,这可能是fps下降的缘故原由。

用例3-更重的动画会测试旋转,缩放和淡入淡出。

在此测试中,我们对照了动画200张图像时的性能。刻度旋转和淡入淡出动画同时执行。

欧博allbet注册:Flutter vs React Native Native:深度性能对照 第7张

欧博allbet注册:Flutter vs React Native Native:深度性能对照 第8张

欧博allbet注册:Flutter vs React Native Native:深度性能对照 第8张

Android
  1. Native 显示出最佳性能和最有用的内存消耗。
  2. Flutter显示出异常靠近本机fps,而且内存开销增添了两倍,但性能仍然不错。
  3. React Native-在这种情形下显示不佳。

欧博allbet注册:Flutter vs React Native Native:深度性能对照 第10张

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,请使用Native,但请记着,Flutter应用程序可以为移动,Web和桌面环境构建,因此Flutter可能会成为跨平台开发之王未来并非遥不能及,直到天,Flutter照样对Native开发工具举行了异常不错的竞争,尤其是在您的开发预算不太重要但您仍在寻找应用程序性能不错的情形下。

我们面临这样一个事实,即可能有许多因素会影响每种手艺的实行和基准,而且你们当中许多人可能是特定平台的真正专家,他们可能会从更多受迎接的工具中挤出更多的钱。我们通过为每个要测试的应用程序建立一个单一的环境以及一套用于权衡性能的工具,试图为流程带来尽可能多的透明度,我希望您喜欢这样的效果。再一次,我们的移动团队和Flutter团队很喜悦收到并负担您所有反馈和建议的重担。

交流

老孟Flutter博客地址(330个控件用法):http://laomengit.com

迎接加入Flutter交流群(微信:laomengit)、关注民众号【老孟Flutter】:

欧博allbet注册:Flutter vs React Native Native:深度性能对照 第11张 欧博allbet注册:Flutter vs React Native Native:深度性能对照 第12张
,

Apple developer enterprise account for rent

providing apple enterprise developer accounts for rent, rent your own enterprise account for app signing. with high quality, stable performance and affordable price.

皇冠APP声明:该文看法仅代表作者自己,与本平台无关。转载请注明:欧博allbet注册:Flutter vs React Native vs Native:深度性能对照

网友评论

  • (*)

最新评论

站点信息

  • 文章总数:539
  • 页面总数:0
  • 分类总数:8
  • 标签总数:949
  • 评论总数:152
  • 浏览总数:3605