原文链接：medium.com/swlh/flutte… 作者：inVerita
研究背后的故事
in Verita及其移动开发团队不断深入研究市场上可用的跨平台移动解决方案的性能，以回答哪种技术对您的产品，甚至职业来说是最好的Flutter或React Native（或Native），这就是Flutter vs React Native vs Native Part I的出现方式。是的，这是相当有争议的，因为人们可以说我们没有使用React Native每天执行多个计算——可能是这样——但是在这种情况下，处理器繁重的任务最好由Flutter或Native应用程序执行。
这就是为什么在这篇文章中，我们决定研究用户界面的性能，它对移动应用的日常用户有更大的影响。
衡量用户界面性能是复杂的，它需要工程师在每个平台上以相同的方式实现相同的功能。我们使用Game Bench作为全球测试工具，以消除疑虑，并确保我们保持客观（这并不能改变我们在大多数方面都非常喜欢Flutter的事实：），并且仍然运行许多React Native和Native项目）。Game Bench有很大的改进空间，但是我们设法在它的帮助下将每个应用程序放入一个单一的测试环境中，这是我们的目标。
源代码是开放的，所以如果你愿意，请尝试并与我们分享你的想法。用户界面动画主要在不同的平台上使用不同的工具，所以我们将所有内容缩小到每个平台支持的库（只有一个案例），或者至少我们尽了一切努力来实现这一点。测试结果可能会有所不同，并取决于您的实现方法，我们相信，作为特定技术的潜在真正专家，您可以将您的特定工具集推向超越我们数字的极限，如果您这样做，我们很高兴。现在，让我们看看这些案例。
硬件信息：
出于测试目的，我们使用了价格合理的小米红米笔记5和苹果6s。
回购链接：
用例1—列表视图基准测试
我们使用Native、React Native和Flutter在Android和iOS上实现了相同的UI。我们还使用Recycler View自动滚动速度。Android上的SmoothScroller。在ios和React Native上，我们使用了一种计时器和编程滚动到位置的方法。在Flutter中，我们使用了Scroll Controller来平滑地滚动列表。在每种情况下，我们在列表视图中有1000个项目，并且到达最后一个列表元素的滚动时间相同。在每种情况下，我们使用每个平台不同库的图像缓存。更多细节可以在源代码中透露。
在这种情况下使用的第三方库：
ios
- 加载和缓存图像—Nuke
安卓系统
- 加载和缓存图像——滑翔
反应本机
-
加载和缓存图像——反应本机快速图像
安卓——基准测试不支持GPU测试结果（不幸的是，我们有很多设备：）））
测试结果
-
所有测试都显示出大致相同的FPS。
-
Android Native使用的内存是Flutter和React Native的一半。
-
React Native需要最严重的CPU攻击。原因是在JS和本机代码之间使用JS Bridge会导致序列化和反序列化资源的浪费。
-
关于电池开发， Android原生有最好的结果。反应本机落后于Android和Flutter。在React Native上运行连续动画会消耗更多的电池电量。
iPhone 6s测试
测试结果
-
FPS。React Native的结果比Flutter和Swift的结果差。原因是无法在ios上使用IoT编译。
-
记忆。Flutter在内存消耗方面几乎与本机匹配，但在CPU上仍然较重。React Native在这个测试中远远落后于Flutter和本机。
-
Flutter和Swift的区别。Flutter正在积极使用CPU，而ios Native正在积极使用GPU。Flutter中的协调会增加CPU的负载。
用例2——重型动画测试
如今，大多数运行在安卓和iOS上的手机都有强大的硬件。在大多数情况下，使用普通的商业应用程序，不会注意到fps下降。这就是为什么我们决定用重动画做一些测试。重到足以让fps下降。我们在Android，iOS，React Native上使用了与Lottie一起动画的矢量动画，并在Flutter上使用了与Flare相同的动画。
使用Lottie for Android，iOS，React Native和Flare for Flutter测试动画。
下载Lottie for Android
测试结果
测试结果
安卓系统
-
Android和React Native在性能上有相似之处。很明显，因为反应本机的洛蒂使用本机手段（16–19%中央处理器，30–29 FPS）。
-
Flutter的结果是如此令人惊讶，尽管它在一次表演中有点搞砸了。（12%CPU和9 FPS）。
我们发现从网格中删除一个特定的动画可以在Flutter上增加高达40%的FPS。我们假设Flare更重，没有针对这种任务进行优化，这就是Flutter获得如此FPS下降的原因。
怪这一个：
下载Lottie for Android
3.Android需要最少的内存（205 Mb）；React Native需要280 Mb，Flutter需要266 Mb。
4.冷应用程序启动。根据这个指标，Flutter是领导者（2秒）。对于Android Native和React Native，大约需要4秒。
ios
-
ios和React Native在这个测试中的结果几乎与Lottie for React Native使用本机手段相同。
-
Flare和Flutter不会停止令人惊讶。Flare肯定还有一段路要走： D
-
ios Native需要最少的内存（48 Mb）。React Native需要135 Mb，Flutter需要117 Mb；
-
冷应用程序启动。根据这个指标，Flutter是领导者（2秒）。对于ios和React Native，大约需要10秒钟；
请注意：我们**在Flutter中使用了不同的库，与其他平台相比，它要重得多，这可能是fps下降的原因。
用例3—甚至更重的动画测试包括旋转、缩放和淡入淡出。
在这个测试中，我们比较了200张图像动画时的性能。同时执行缩放旋转和淡入淡出动画。
200张图片
测试结果
安卓系统
-
Native显示出最高的性能和最有效的内存消耗。
-
Flutter显示出足够的性能来舒适地工作，但与Native相比，内存开销增加了两倍。
-
反应本机—在这种情况下表现不佳。
测试结果
ios
-
iPhone 6s功能强大，在所有三种情况下都不会丢弃fps。
-
原生使用的资源较少，主要使用GPU。
-
React Native主要使用CPU进行渲染，而Flutter使用GPU。
-
React Native使用了更多的内存。
总结
对于那些带有小动画和闪亮外观的普通商业应用来说，技术根本不重要。但是如果你要做一些重动画，请记住本地人有最强的表演能力。接下来是Flutter和React Native。我们绝对不建议在非常重CPU的操作中使用React Native，而从CPU和内存的角度来看，Flutter非常适合此类任务。
您选择的工具取决于您的特定产品和业务案例。如果你想开发一个单一平台的最有价值球员——使用本地手段，但请记住，Flutter应用程序可以为移动、网络和桌面环境构建，而且感觉Flutter可能会在不远的将来成为跨平台开发之王，因为即使在今天，Flutter也为本地开发工具创造了一个非常不错的竞争，尤其是如果你的开发预算不太紧张，但你仍然在不同平台上寻找你的应用程序的良好性能。
我们面临的事实是，可能有许多因素影响每种技术的实现和基准，你们中的许多人可能是特定平台的真正专家，可以从心爱的工具集中挤出更多。我们试图通过为每个应用程序创建一个测试环境和一套衡量性能的工具来尽可能多地提高透明度，我希望你喜欢这个结果。我们的移动和Flutter团队很乐意接受并承担您的反馈和建议。
