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

老孟导读：这是老孟翻译的付费文章，文章全部权归原做者全部。

欢迎加入老孟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在Android和iOS上实现了相同的UI。咱们还使用Android上的RecyclerView.SmoothScroller来自动化滚动速度。在iOS和React Native上，咱们使用了带有计时器的方法，并以编程方式滚动到位置。在Flutter上，咱们使用ScrollController平滑滚动列表。在每种状况下，咱们在列表视图中都有1000个项目，而且滚动时间相同以到达最后一个列表元素。在每种状况下，咱们都使用每一个平台具备不一样库的图像缓存。更多细节能够在源代码中揭示。

在这种状况下使用的第三方库：

iOS：

• 加载和缓存图像 — Nuke

Android：

• 加载和缓存图像 — Glide

React Native：

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

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

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。

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降低的缘由。

怪这一个：

3. Android须要最少的内存（205 Mb）； React Native须要280 Mb，Flutter须要266 Mb。
4. 冷启动应用程序。根据此指标，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张图像时的性能。刻度旋转和淡入淡出动画同时执行。

Android

1. Native 显示出最佳性能和最有效的内存消耗。
2. Flutter显示出很是接近本机fps，而且内存开销增长了两倍，但性能仍然不错。
3. React Native-在这种状况下表现不佳。

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】：