【译】Flutter vs React Native vs Native
- Android：
Glide - React Native：
React-native-fast-image
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofGIYlVC-1650874408249)(https://user-gold-cdn.xitu.io/2020/7/1/1730870dcac20e0e?imageslim)]
Android — GPU 测试结果不支持 benchmark
Android 测试
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TAp1IvKD-1650874408250)(https://user-gold-cdn.xitu.io/2020/7/1/17308652f37e9711?imageView2/0/w/1280/h/960/ignore-error/1)]
检测结果：
-
- 所有测试均显示出大致相同的FPS。
-
- 与 Flutter 和 React Native 相比，Android 原生使用的内存只有一半。
-
- React Native 需要较重的 CPU 利用，原因是在于目前的 JS 和原生之间的代码需要使用
JSBridge，这会在序列化和反序列化方面浪费资源。
- React Native 需要较重的 CPU 利用，原因是在于目前的 JS 和原生之间的代码需要使用
-
- 关于电池利用方法，Android 原生最省电，React Native 落后于 Android 和 Flutter，特备是运行连续动画上 React Native 会消耗更多电池电量。
iOS 测试
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wqcLa0mS-1650874408250)(https://user-gold-cdn.xitu.io/2020/7/1/17308656599e3bd3?imageView2/0/w/1280/h/960/ignore-error/1)]
检测结果:
1、在 FPS 上 React Native 的结果比 Flutter 和 Swift 差，原因是无法在 iOS 上使用 IoT 编译。 2、在内存上 Flutter 与原生的内存消耗几乎相同，但在 Flutter 在 CPU 上消耗更重，在此测试中结果中 React Native 远远落后于 Flutte 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》无偿开源 徽信搜索公众号【编程进阶路】 r 和原生。 3、在测试结果中 Flutter 会利用更多CPU，而 iOS 原生会更多利用 GPU；
测试用例2 — Heavy animations test
如今大多数 Android 和 iOS 都具有强大的硬件，所以在大多数情况下是不会发现 fps 有明显的下降，这就是为什么我们决定增加复杂的动画测试的原因，并且要足够复杂以实现导致 fps 下降。
该测试用力在 Android，iOS，React Native 上使用了 Lottie 进行复杂矢量动画的展示，并在 Flutter 上使用了 Flare 实现相同的动画。
如下图所示，是在 Android 、iOS 和 React Native 上使用 Lottie ，而在 Flutter 上使用的Flare 的实现效果。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1ANowdF-1650874408251)(https://user-gold-cdn.xitu.io/2020/7/1/173086a921b994a1?imageslim)]
Android
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SnKZA1N0-1650874408251)(https://user-gold-cdn.xitu.io/2020/7/1/173086687995e5d1?imageView2/0/w/1280/h/960/ignore-error/1)]
-
- Android 和 React Native 在性能表现上差不多。很明显这是因为该场景下 Lottie for React Native 只需要使用的原生的绘制逻辑（16–19％CPU，30–29 FPS）。
-
- Flutter的结果让人有些惊讶，因为它的效果有点糟。（12％的CPU和9 FPS）。
而从上述网格动画中删除一个特定的动画后，居然会使 Flutter 上的 FPS 最高提高 40％，所以这里猜测可能是 Flare 对于类似乎任务没有进行优化，或者 Flutter 本身对这种绘制存在兼容问题的原因：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5wgA2MM8-1650874408252)(https://user-gold-cdn.xitu.io/2020/7/1/1730866e744745ed?imageView2/0/w/1280/h/960/ignore-error/1)]
-
- Android 原生需要的内存最少（205 Mb）；React Native 需要 280 Mb，Flutter 需要266 Mb。
-
- 应用程序冷启动后，Flutter处于领先地位（2秒），对于 Android 原生和 React Native 大约需要4秒钟。
iOS
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fgtpdva2-1650874408252)(https://user-gold-cdn.xitu.io/2020/7/1/1730867100024b70?imageView2/0/w/1280/h/960/ignore-error/1)]
-
- 不出意料 iOS 和 React Native 在此测试中的结果几乎一致；
-
- Flare 和 Flutter 依旧没有好的表现；
-
- iOS 原生需要的内存量 48 Mb ，React Native 需要 135 Mb，Flutter需要 117 Mb；
-
- 应用程序冷启动后，Flutter处于领先地位（2秒），对于 iOS 原生和 React Native 大约需要 10秒钟；
请注意：在这种情况下我们为 Flutter 使用了一个不同的库，该库比我们在其他平台上使用的库重得多，这可能是fps下降的原因。（因为 Lottie 在 Flutter 上目前的开源效果更差）
用例3 - Even heavier animations test with rotations, scaling and fade.
在此测试中，我们对 200 张图像进行动画运行（旋转和淡入淡出），从而对比不同平台的性能。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-loKVbCVX-1650874408253)(https://user-gold-cdn.xitu.io/2020/7/1/173087880a437d69?imageslim)]
Android
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZGsP1K5S-1650874408253)(https://user-gold-cdn.xitu.io/2020/7/1/17308675f727c5c6?imageView2/0/w/1280/h/960/ignore-error/1)]
-
- 原生平台显示出最佳性能和最有效的内存管理。
-
- Flutter 显示出非常接近元素的 fps，但是内存开销增加了两倍。
-
- React Native 在这种情况下表现不佳。
iOS
tter 显示出非常接近元素的 fps，但是内存开销增加了两倍。
-
- React Native 在这种情况下表现不佳。