【译】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)]

检测结果：

• 1. 所有测试均显示出大致相同的FPS。
• 2. 与 Flutter 和 React Native 相比，Android 原生使用的内存只有一半。
• 3. React Native 需要较重的 CPU 利用，原因是在于目前的 JS 和原生之间的代码需要使用 JSBridge，这会在序列化和反序列化方面浪费资源。
• 4. 关于电池利用方法，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)]

• 1. Android 和 React Native 在性能表现上差不多。很明显这是因为该场景下 Lottie for React Native 只需要使用的原生的绘制逻辑（16–19％CPU，30–29 FPS）。
• 2. 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)]

• 3. Android 原生需要的内存最少（205 Mb）；React Native 需要 280 Mb，Flutter 需要266 Mb。
• 4. 应用程序冷启动后，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)]

• 1. 不出意料 iOS 和 React Native 在此测试中的结果几乎一致；
• 2. Flare 和 Flutter 依旧没有好的表现；
• 3. iOS 原生需要的内存量 48 Mb ，React Native 需要 135 Mb，Flutter需要 117 Mb；
• 4. 应用程序冷启动后，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)]

• 1. 原生平台显示出最佳性能和最有效的内存管理。
• 2. Flutter 显示出非常接近元素的 fps，但是内存开销增加了两倍。
• 3. React Native 在这种情况下表现不佳。

iOS

tter 显示出非常接近元素的 fps，但是内存开销增加了两倍。

• 3. React Native 在这种情况下表现不佳。

iOS