Flutter vs React Native 性能测试结果：谁才是王者？

Flutter vs React Native 性能测试结果

视频

https://youtu.be/-YGAhOG9Xec

https://www.bilibili.com/video/BV1etWHeqEZ2/

前言

原文 flutter-vs-react-native-performance-benchmark

github 上有人写了 flutter react-native 的基准测试代码。

https://github.com/nateshmbhat/flutter-rn-performance-benchmarks

对 Flutter 和 React Native 进行全面性能测试，包括应用 APK 大小、内存和 CPU 使用情况，揭示了这两个框架在不同场景下的性能表现。今天我们一起来看下基准测试结果。

参考

正文

测试方法

包含 1001 项的大型列表视图

批量图像动画：同时旋转、淡入淡出和缩放 200 张图像

批量 Lottie 动画：在单个屏幕上显示 36 个 Lottie 动画。

三种类型的应用程序进行了基准测试：

包含 1001 项的大型列表视图：每项包括一个静态图片和一个无限旋转的图片。
批量图像动画：同时旋转、淡入淡出和缩放 200 张图像。
批量 Lottie 动画：在单个屏幕上显示 36 个 Lottie 动画。

基准测试过程

每个基准测试都在 M1 Mac 上进行。
这些应用在 OnePlus 7 和 Pixel 设备上进行了测试，运行 Android 系统。
内存和 CPU 使用情况是通过运行发布版 APK（React Native 的缩小版 APK）使用 Android Profiler 测量的。
FPS 是在 Flutter 应用的“性能分析模式”下测量的，而对于 React Native，则是在禁用开发模式并使用 metro bundler 打包的 JS 压缩构建下进行测量的。（由于仅在使用 metro bundler 运行时才支持 RN 性能数据）

使用的框架版本

React Native : 0.74.1
Flutter: 3.19.5
Dart: 3.3.3
DevTools: 2.31.1

1001 项大列表测试结果

列表视图基准测试结果

列表视图基准测试结果

Flutter:

FPS: 60（无卡顿）
Dart 堆内存使用量：7–8 MB
APK 大小：16.8 MB（构建时间为 7.6 秒）
进程内存：120–130 MB（滚动时保持不变）
CPU: 5–8%（滚动时保持不变）
即使在快速滚动时也没有任何卡顿或帧率下降

React Native:

FPS: 50–55（明显卡顿）
APK 大小：21.9 MB（构建需 23 秒）
内存：160 MB（在不滚动时），180–190 MB（滚动时）
CPU: 11–13%（未滚动时），飙升至 25–30%（滚动时）
滚动时偶尔出现帧率下降和空白项目

*Flutter 在滚动过程中没有出现内存或 CPU 突增，滚动流畅，而 React Native 在滚动时出现了帧率下降和显著的 CPU 与内存突增。*

批量图片动画测试结果

批量图像动画基准测试结果

批量图像动画基准测试结果

Flutter:

FPS: 58–60
Dart 堆栈: 13.4 MB
APK 大小：11.6 MB（构建耗时 19.6 秒）
内存：128–135 MB
CPU: 8%

React Native:

FPS: 58–60（偶尔会下降）
APK 大小：21 MB（构建需 20 秒）
内存：380–396 MB
CPU: 12–16%

*两个框架保持了类似的 FPS，但在动画重新启动时，React Native 出现了 FPS 下降，并且内存使用明显更高。*

批量 Lottie 动画测试结果

批量 Lottie 动画基准测试结果

批量 Lottie 动画基准测试结果

Flutter:

FPS: 36
APK 大小：7.6 MB（构建耗时 20.8 秒）
内存：220 MB
CPU: 11%

React Native:

FPS: 43
APK 大小：18.5 MB（构建需 23 秒）
内存：240 MB
CPU: 22%

*在这个测试中，有趣的是 React Native 在 FPS 方面的表现优于 Flutter，但 CPU 和内存使用率更高。*

新更新：根据 Flutter 最近发布的 3.22 版本文章，Lottie 在其 Impeller 渲染引擎上的渲染性能有了显著提升。此基准测试使用的是 Flutter 3.19.5。我尚未在 Android 上针对这个新版本运行此基准测试。

启动项目对比测试结果

当我们最初在 React Native 或 Flutter 中创建项目时，一个意外的发现是，对于初始项目而言，React Native 的 APK 大小显著高于 Flutter 应用。

虽然这个特定的情况不是一个完全公平的比较（考虑到两个启动应用不同），并且可以不将其作为性能基准测试的结果，但它确实呈现了一些有趣的现象。

启动项目构建时间与应用大小比较

请注意，React Native 中的应用创建时间较长，因为在设置新项目时需要下载整个 react-native 库，而 Flutter SDK 在创建新应用之前就已经需要下载好了。

代码

基准测试的源代码

小结

所有基准测试一贯显示 Flutter 的 APK 大小更小，其 CPU 和内存使用情况也比 React Native 稍好。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

猫哥 APP

flutter 学习路径

end

Flutter vs React Native 性能测试结果：谁才是王者？