乐趣区

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

jiezi

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

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

原文地址：https://medium.com/swlh/flutt…

让我们比较流行的移动开发工具在日常生活中的 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 下降的原因。

怪这一个：

  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 张图像时的性能。刻度旋转和淡入淡出动画同时执行。

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】：
退出移动版