技术编程Flutter vs React Native vs Native：深度性能比较 |

作者 | InVerita
策划 | 蔡芳芳
Flutter 是 Google 开源的移动用户界面框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面，正在被全球越来越多的开发者和组织使用。而 React Native（简称 RN）是 Facebook 开源的跨平台移动应用开发框架，是 Facebook 早先开源的 JS 框架 React 在原生移动应用平台的衍生产物，支持 iOS 和安卓两大平台。至于 Native ，就是传统的原生 App 开发模式。那么问题来了，在这三种开发技术，我们该如何进行选型呢？本文将对这三种开发方案的性能进行深度对比，包括它们在多个应用场景下 FPS、CPU、内存和 GPU 方面的性能。希望对读者有所帮助。
本文最初发表在 Medium 博客，经原作者 inVerta 公司授权，由 InfoQ 中文站翻译并分享。
研究背景
inVerita 及其移动开发团队不断深入研究市场上可用的跨平台移动解决方案的性能，以回答这样一个问题：对于你的产品，甚至是你的职业生涯来说， Flutter、React Native（或 Native），哪种技术是最好的？这就是文章《Flutter vs React Native vs Native：性能考察》的由来。是的，这篇文章引发了一些争议，因为有人认为，我们并没有使用 React Native 每天进行很多次计算，但如果是这种情况， CPU 占用率较高的任务由 Flutter 或 Native app 来完成会更好。
这也是为什么在本文中，我们决定研究用户界面的性能，因为它对移动应用程序的普通用户影响更大。
衡量用户界面性能很复杂，它需要工程师在每个平台上以相同的方式实现相同的功能。我们选择了 GameBench 作为全局测试工具，以确保我们能够保持客观（这并不会改变我们在很多方面喜爱 Flutter 这一事实，并且我们也运行着大量 React Native 和 Native 项目）。尽管 GameBench 还有很大的改进空间，但是，在它的帮助下，我们还是成功地将每个应用程序放入一个单独的测试环境中，这也是我们的目标。
源代码是开源的，因此，如果你愿意的话，可以自己做实验并与我们分享你的想法。用户界面的动画通常在不同的平台上使用不同的工具，所以我们将范围限制在每个平台（只有一种情况除外）都支持的库中，或者至少我们已经尽己所能来实现这一点。现在，让我们来看看这些用例。
硬件信息：为完成这项测试，我们使用了价格实惠的手机：红米 Note5 和 iPhone 6S 。
GitHub 链接：
【技术编程Flutter vs React Native vs Native：深度性能比较】用例 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 测试结果不受基准测试的支持（不幸的是，这样的设备我们还有很多）。

本文插图
所有测试都显示 FPS 大致相同。
与 Flutter 和 React Native 相比， Android Native 使用的内存只有一半。