技术编程Flutter vs React Native vs Native：深度性能比较( 二 ) |

React Native 需要最大程度的 CPU 利用率。原因是在 JS 和 Native 代码之间使用 JSBridge ，这会导致在序列化和反序列化上资源的浪费。
在电池开发方面， Android Native 取得了最好的结果。 React Native 落后于 Android 和 Flutter 。在 React Native 上运行连续动画会消耗更多的电池电量。
iOS

本文插图
FPS：React Native 的结果比 Flutter 和 Swift 更差。原因是无法在 iOS 上使用 IoT 编译。
内存：Flutter 在内存消耗上方面基于与原生方式相当，但在 CPU 的占用率仍然较高。在这项测试中， React Native 远远落后于 Flutter 和 Native 。
Flutter 和 Swift 之间的区别：当 iOS Native 正在使用 GPU 时， Flutter 正在使用 CPU 。 Flutter 中的协调增加了 CPU 上的负载。
用例 2：重动画测试
如今，大多数 Android 和 iOS 手机的硬件配置都很强大。在大多数情况下，使用普通应用， FPS 的下降并不会引人注意。这就是为什么我们决定用重动画进行一些测试。这些动画重到足以让 FPS 下降到引人注意的地步。我们在 Android、iOS、React Native 上使用 Lottie 制作的矢量动画，并在 Flutter 上的 Flare 采用了同样的动画。
使用 Android、iOS 和 React Native 版的 Lottie 和 Flutter 的 Flare 测试动画。
Android 上的 Lottie

本文插图
Android 测试结果

本文插图
iOS 测试结果
Android
Android 和 React Native 在性能上表现相似，这是显而易见的，因为 React Native 版的 Lottie 使用了原生方式（CPU 占用率 16~19% ， FPS 为 30~29）。
Flutter 的结果令人惊讶，尽管它在性能演示中有点搞砸了（CPU 占用率为 12% ， FPS 为 9）。
我们发现，从网格中删除一个特定的动画，会让 Flutter 上的 FPS 最高提高 40% 。我们认为 Flare 更重，并且没有针对这类任务进行优化，这就是为什么 Flutter 获得如此高的 FPS 下降。
Android 需要的内存最少（205MB）， React Native 需要 280MB ， Flutter 需要 266MB 。
应用程序冷启动。 Flutter 在这个指标上表现最好（2 秒），而 Android Native 和 React Native 大约需要 4 秒钟。
iOS
iOS 和 React Native 在这个测试中的结果几乎与 Lottie 的 React Native 使用原生方式相同。
Flare 和 Flutter 依然让人惊讶， Flare 肯定还有一段路要走。
iOS Native 需要的内存最少（48MB）， React Native 需要 135MB ， Flutter 需要 117MB 。
应用程序冷启动。 Flutter 在这个指标上表现最好（2 秒），而 iOS 和 React Native 大约需要 10 秒钟。
请注意：在这个用例中， Flutter 用了一个不同的库，与我们在其他平台上使用的库相比，这个库要重得多，这可能是导致 FPS 下降的原因。
用例 3：旋转、缩放和淡入淡出
在这项测试中，我们比较了 200 张动图的动画性能，缩放、旋转和淡入淡出同时执行。
200 张动图

本文插图
Android 测试结果
Android
Native 显示了最高的性能及最高效的内存消耗。
Flutter 显示了非常接近 Native 的 FPS ，内存开销增加了两倍多，但仍有不错的性能。