Flutter vs React Native 性能测试结果：谁才是王者？
Flutter vs React Native 性能测试结果：谁才是王者？
在移动应用开发领域，Flutter和React Native是两个最受欢迎的跨平台开发框架。本文通过三个具体的性能测试场景，对这两个框架的性能表现进行了全面对比，包括FPS、内存使用、CPU占用等关键指标。测试结果表明，Flutter在大多数场景下都展现出更好的性能表现。
测试概述
github 上有人写了 flutter react-native 的基准测试代码。
https://github.com/nateshmbhat/flutter-rn-performance-benchmarks
对 Flutter 和 React Native 进行全面性能测试，包括应用 APK 大小、内存和 CPU 使用情况，揭示了这两个框架在不同场景下的性能表现。今天我们一起来看下基准测试结果。
测试环境与版本
- 测试设备：M1 Mac，OnePlus 7 和 Pixel 设备（Android 系统）
- 测试工具：Android Profiler
- 框架版本：
- React Native : 0.74.1
- Flutter: 3.19.5
- Dart: 3.3.3
- DevTools: 2.31.1
测试场景
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 与内存突增。
2. 批量图片动画测试
测试内容：同时旋转、淡入淡出和缩放 200 张图像。
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 下降，并且内存使用明显更高。
3. 批量 Lottie 动画测试
测试内容：在单个屏幕上显示 36 个 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 和内存使用率更高。
4. 启动项目对比测试
结论：所有基准测试一贯显示 Flutter 的 APK 大小更小，其 CPU 和内存使用情况也比 React Native 稍好。
总结
通过以上测试可以看出，Flutter在大多数场景下都展现出更好的性能表现，特别是在大型列表视图和批量图片动画场景中优势明显。虽然在Lottie动画测试中React Native的FPS略高，但其CPU和内存使用率更高。此外，Flutter的APK大小普遍更小，构建速度更快。