Flutter vs React Native 性能测试结果：谁才是王者？
视频
https://www.bilibili.com/video/BV1etWHeqEZ2/
前言
github 上有人写了 flutter react-native 的基准测试代码。
https://github.com/nateshmbhat/flutter-rn-performance-benchmarks
对 Flutter 和 React Native 进行全面性能测试，包括应用 APK 大小、内存和 CPU 使用情况，揭示了这两个框架在不同场景下的性能表现。今天我们一起来看下基准测试结果。
参考
正文
测试方法
三种类型的应用程序进行了基准测试：
- 包含 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 动画基准测试结果
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 稍好。
感谢阅读本文
如果有什么建议，请在评论中让我知道。我很乐意改进。
flutter 学习路径
- Flutter 优秀插件推荐
- Flutter 基础篇1 - Dart 语言学习
- Flutter 基础篇2 - 快速上手
- Flutter 实战1 - Getx Woo 电商APP
- Flutter 实战2 - 上架指南 Apple Store、Google Play
- Flutter 基础篇3 - 仿微信朋友圈
- Flutter 实战3 - 腾讯即时通讯 第一篇
- Flutter 实战4 - 腾讯即时通讯 第二篇
© 猫哥 ducafecat.com
end