Flutter vs React Native新架构：性能对比评测

选择 React Native 和 Flutter 可能会让人感到手足无措。两者都被广泛认可和采用，大科技公司都有广泛应用（虽然 Flutter 的支持生态有时会受到质疑——不过我们暂时不谈这一点）。

通常，因素如社区规模、技术采用情况以及编程语言偏好在做出这样的选择时起着关键作用。然而，本文旨在把这些因素放在一边，专注于性能表现——这是一个直接影响用户体验和应用程序扩展性的关键因素。

我们都知道，Flutter 通常在内存分配、应用大小和运行效率方面优于 React Native，这主要是由于其架构。然而，React Native 的新架构又如何呢？虽然它已经正式发布，但最新的基准测试数据似乎显示了一些差距，这让我决定写这篇文章。

为了处理这个问题，我做了下这两个框架的基准测试。让我们一步一步来。

我使用了三个测试用例，在三个不同的版本中，来分配重要设备资源并模拟最坏（离奇）的情况。

1. 一个包含1,000项的大列表，每个项是一个简单的卡片，左侧是图片（图片的细节将在后面说明），右侧是标题。
   - 代码链接：RN代码 / Flutter代码

2. 一个包含具有动态效果的图片的大网格，重用了相同的1,000项，排列在两列中。每个图片会先放大并旋转360度，同时逐渐变淡，最后恢复到初始状态，这个过程会无限循环。
   - 代码链接：RN代码 / Flutter代码

3. 一个包含多个Lottie动画的大网格，同样使用相同的1,000项，排列在两列中。每个项从一套包含20个独立动画文件中选择，所有这些文件都存储在项目本地。
   - 代码链接：RN代码 / Flutter代码

我使用了一组不同大小的图片，包括25张本地图片（存储在项目中）——总共1 MB大小——和25张网络图片，通过全球CloudFront分发提供。我还使用了网络链接控制器来限制我的网速，避免测试结果受到干扰。

测试是在一台配备128GB内存的MacBook M3 Max上运行的模拟器上进行的（尽管如此，可能有些过剩，因为崩溃的可能性很小，不过我们继续进行）。Android模拟器使用的是Pixel 9 Pro XL（API 35），而iOS模拟器运行的是iPhone 15 Pro Max（iOS 18.1）。

除了仅在iOS上执行的FPS测试——这些测试是在一台真正的iPhone 15 Pro Max（iOS 18.1.1）上进行的，因为Xcode仅允许在真机上使用Core Animation FPS工具。

在iOS上，使用Xcode内置的Instruments工具进行了测试和分析，利用时间配置文件(Time Profile)来分析内存分配、CPU使用率和帧率(FPS)。在Android上，我使用了Android Studio内置的Profiler工具。

所有测试都是通过Maestro来运行的，这是一个移动UI测试框架（类似于Detox）。因此我选择了Maestro，以确保测试的一致性，避免因在一台设备上比另一台设备更快地滚动等操作影响测试结果。使用Maestro创建一个功能性的测试是如此简单。

    appId: com.apprnbenchmark  
    ---  
    - tapOn: Lottie  
    - repeat:  
        times: 6  
        commands:  
          - swipe:  
              duration: 100  
              start: 50%, 90% # 从宽度的 50%， 高度的 90%  
              end: 50%, 10% # 到宽度的 50%， 高度的 10%

Alternatively, following the second suggestion more closely:

    appId: com.apprnbenchmark  
    ---  
    - tapOn: Lottie  
    - repeat:  
        times: 6  
        commands:  
          - swipe:  
              duration: 100  
              start: 50%, 90% # 从 50%, 90%  
              end: 50%, 10% # 到 50%, 10%

说实话，当我刚开始创建这些测试的时候，我只是计划将Flutter与React Native（使用裸项目）进行比较。然而，在阅读了React Native的文档后，我发现他们强烈建议使用Expo来创建新项目。
那为什么不也加上一个使用Expo的React Native的对比呢？

• React Native: 0.76.3(package.json)
  - RN Reanimated: 3.16.3
  - RN Lottie: 7.1.0
• Expo: Expo 框架(package.json)
  - React Native: 0.76.3
  - RN Reanimated: 3.16.3
  - RN Lottie: 7.1.0
• Flutter: 3.24.5 (pubspec.yaml)
  - Dart: 3.5.4
  - Lottie: 动效库 3.1.3
• Maestro: Maestro（注：Maestro 是一个特定的框架或工具名称，在此上下文中保持原名更合适。）

我会把基准测试结果分为Android和iOS两部分，比较应用大小、资源使用量等。最后，我会总结一下这一切，突出那些值得说一说的关键优缺点。

免责声明：本文比较了 Flutter 和 RN 在最基本的原装配置下的性能，也就是说，没有做任何额外的优化。
虽然像 Lottie、Reanimated 或 FlatList 这样的第三方库无法全面展示优化后的效果，但本文旨在展示新项目的基准性能。后续文章可能会探讨在应用优化后的这些框架，进行更公平的比较。

Flutter 能够生成更小的 AAB 和 APK 文件，比纯 React Native 项目和使用 Expo 构建的项目生成的文件更小。这在某种程度上是预料之中的，因为 Flutter 不需要额外的库，比如 Reanimated，等等。

AAB 文件（单位：MB）

再次，Flutter 在所有指标上都优于基于 React Native 的项目。有趣的是，Flutter 在测试开始前和测试运行期间内存和 CPU 使用率几乎保持一致——至少在 Android 设备上也是如此。

虽然RN项目中的内存使用量相当大，但在Expo进行Lottie测试时，我只注意到轻微的帧数下降。除此之外，一切都很顺畅。

测试中的一些图片可以在这里看到这里看。
我还录制了运行这两个测试时的屏幕，可以在这里看这里看。

当谈到应用大小时，Flutter 和 RN 裸项目的结果相同。我使用了一个生产版的 .ipa 文件生成了下图，有点意外的是，在 iOS 上，即使需要安装 RN Reanimated 库，RN 的大小仍然与 Flutter 保持一致。

.ipa 文件（.ipa 文件），大小以 MB 为单位

在前两次测试中，尽管RN消耗的资源比Flutter多得多，但我没有注意到任何帧丢失的情况——一切都运行得很流畅。
说到Lottie动画测试时，滚动变得完全不可能——非常卡顿。后面我会更多地讨论帧率下降的情况。

无掉帧

没有掉帧

rn刚说：fps? 哈哈（lol）

RN的测试开始时表现良好，即使面对长列表，也能稳定保持60 FPS，没有任何掉帧。Lottie的测试也顺利开始，不过，加载时已经可以明显感受到页面资源消耗较大。然而，几秒钟后，性能迅速恶化，难以维持在45 FPS以上，甚至低于45 FPS，流畅滚动也变得不可能。
最后，轮到了测试动画图片的部分。在这个环节中，FPS非常稳定，始终保持在60 FPS，没有任何掉帧。

在 Flutter 中，FPS 下降仅出现了一次，如分析图（右）所示，但在高 GPU 使用率的情况下，依然未感觉到任何明显差异。

RN / Flutter (RN/Flutter技术栈)

你可以在这里查看FPS测试结果中的图片和其他一些截图。

因此，经过所有这些测试之后，无论编程语言喜好、采用度、社区支持或是桥接版本是否存在，Flutter 在这种情况下仍然比 RN（无论是否有 Expo）表现更优异。

Flutter 占用较少的内存和 CPU，同时生成的包大小也相对较小。React Native 的另一个问题是开发人员需要付出大量努力来优化性能，只是为了达到 Flutter 默认提供的效率水平。这种额外的复杂性可能成为团队选择开发工具时的关键因素。

总之，Flutter 在效率和资源占用方面的一贯性使它成为强有力的角色，特别是在性能优先的项目中。

感谢您看到这里！如果您想通过LinkedIn和我联系，随时欢迎联系。