全文共3382字，预计学习时长9分钟

图源：unsplash

 

inVerita及其移动开发团队不断深入研究市场上可用的移动跨平台解决方案的性能，旨在解答这样一个问题：对于你的产品，甚至是你的职业生涯来说，Flutter、React Native（或Native），哪种技术是最好的选择？

 

有人认为，我们并没有每天都用React Native进行多次重复计算，但如果CPU占用率较高的任务由Flutter或Native应用程序来完成，效果会更好。所以本文决定研究用户界面的性能，因为它对移动应用程序的日常用户影响更大。

 

衡量用户界面性能很复杂，需要工程师在每个平台上以同样的方式实现相同的功能。本文选择了GameBench作为统一测试工具，以确保测试的客观性。尽管GameBench还有很大的改进空间，但我们还是在其帮助下成功地将每个应用程序都放入一个单独的测试环境中。

 

源代码是开源的，用户可以分享自己的经验和想法。用户界面的动画通常在不同的平台上需要使用不同的工具，所以我们将范围限制到每个平台（只有一种情况除外）都支持的库中，或者至少已尽己所能来实现这一点。

 

当然，使用不同的运行方法可能会出现不一样的测试结果。对某个领域真正的技术专家来说，一定可以把自己的一套测试工具运用得淋漓尽致，可能超过我们的测试结果。来看看我们的测试吧！

 

 

硬件信息

 

为了完成这项测试，我们选择的手机是：红米Note 5和iPhone 6s。

源代码链接：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——加载和缓存图像：React-native-fast-image

 

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.1.上使用 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 测试结果

 

 

1.Android和React Native在性能上表现相似。这十分明显，因为React Native版的Lottie使用了Native原生方式（CPU占用率为16~19%，FPS为30~29）。

2.Flutter的结果令人惊讶，尽管它在性能测试中表现不佳（CPU占用率为 12%，FPS为9）。

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

3.Android需要的内存最少（205MB），React Native需要280MB，Flutter需要 266MB。

4.应用程序冷启动。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张动图的动画性能，缩放、旋转和淡入淡出同时执行。

 

Android测试结果

 

 

1.Native的性能最高、内存消耗最高效。

2.Flutter与Native在FPS上差不多，虽然与Native相较，Flutter的内存增加了一倍不止，但其性能依然不错。

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，而无论是从CPU还是内存的角度来看，Flutter都非常适合这类任务。

 

选择哪种工具取决于具体的产品和业务案例。如果你想开发一个单一平台的MVP——使用原生方式，但要记住，Flutter应用程序可以同时在移动、网络和桌面环境中构建，而且Flutter在不久的将来有望成为跨平台开发的王者。即使在今天，Flutter也是原生开发工具一个强有力的竞争对手，尤其是当开发预算勉强够用，但又想让自己的应用程序拥有良好性能的时候。

 

图源：unsplash

 

可能会有很多因素影响每项技术的实施和基准，而许多人可能又是某个特定平台真正的专家，可以从工具集中获取更多的好处。

 

我们尝试通过为每款应用创建一个单一的测试环境，以及用一套单一的工具来衡量性能，从而尽可能地提高整个测试过程的透明度，希望测试结果能够对你有帮助。

一起分享AI学习与发展的干货

欢迎关注全平台AI垂类自媒体 “读芯术”

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）