【译】Flutter vs React Native vs Native：深度性能比较

本文翻译自 inVerita 的《Flutter vs React Native vs Native: Deep Performance Comparison》

原文连接： medium.com/swlh/flutte…)

研究背后的故事

inVerita(inveritasoft.com/)一直致力于移动跨平台方案的性能问题，以此来解答哪一种场景下开发者须要使用 Flutter 、 React Native 或原生开发，甚至是你须要选择哪一个职业。

在以前的 《Flutter vs Native vs React-Native: Examining performance》 对比中有一个很有争议的点，其中有人提出正常状况下咱们是不会在 React Native 进行这些重复和复杂的计算，虽然在这种状况下，使用 Flutter 或 Native 确实会有更好的表现结果。

因此这一次咱们决定研究 UI 的性能对比，由于它对移动应用开发的平常影响更大一些。

在移动平台想要衡量 UI 性能很复杂，由于这须要开发者在每一个平台上，都以相同的方式去实现同样的功能，而本文将使用 GameBench(www.gamebench.net/) 做为测试工具以确保测试的客观性。

GameBench 自己还有不少改进的空间，但咱们的目标是设法将每一个测试程序都放置在一个测试环境中。

本书的测试代码是开源的，因此若是你有什么想法也欢迎和咱们分享。UI 动画一般在不一样平台上须要使用不一样的工具，所以咱们会将全部的测试内容都缩小到每一个平台支持的库中，这样至少能尽可能作到公平一些。

固然不一样的运行方法可能会出现不同的测试结果，咱们相信在某个领域真正的技术专家可让对应逻辑极限运行以超过咱们的结果。本文的测试环境：

• 硬件信息：小米Redmi Note 5和iPhone 6s。
• 源代码：github.com/InVeritaSof…

测试用例1 — List view benchmarking

这里咱们使用原生、React Native 和 Flutter 在 Android 与 iOS 上实现了相同的 UI 列表，而且:

• Android 上的 RecyclerView.SmoothScroller 来自动化滚动速度;
• iOS 和 React Native 上使用了带有计时器的方法，并以代码的方式滚动到位置；
• 在 Flutter 上使用 ScrollController 实现列表的平滑滚动；

在每种状况下列表视图中都有 1000 个项目，而且以相同时间滚动到最后一个列表元素，同时在每一个平台都使用对应的库进行图像缓存，更多细节能够在源代码中查看，其中图片使用的第三方库：

• iOS： Nuke
• Android： Glide
• React Native：React-native-fast-image

Android — GPU 测试结果不支持 benchmark

Android 测试

检测结果：

• 1. 全部测试均显示出大体相同的FPS。
• 2. 与 Flutter 和 React Native 相比，Android 原生使用的内存只有一半。
• 3. React Native 须要较重的 CPU 利用，缘由是在于目前的 JS 和原生之间的代码须要使用 JSBridge，这会在序列化和反序列化方面浪费资源。
• 4. 关于电池利用方法，Android 原生最省电，React Native 落后于 Android 和 Flutter，特备是运行连续动画上 React Native 会消耗更多电池电量。

iOS 测试

检测结果:

一、在 FPS 上 React Native 的结果比 Flutter 和 Swift 差，缘由是没法在 iOS 上使用 IoT 编译。 二、在内存上 Flutter 与原生的内存消耗几乎相同，但在 Flutter 在 CPU 上消耗更重，在此测试中结果中 React Native 远远落后于 Flutter 和原生。 三、在测试结果中 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 的实现效果。

Android

• 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 自己对这种绘制存在兼容问题的缘由：

• 3. Android 原生须要的内存最少（205 Mb）；React Native 须要 280 Mb，Flutter 须要266 Mb。
• 4. 应用程序冷启动后，Flutter处于领先地位（2秒），对于 Android 原生和 React Native 大约须要4秒钟。

iOS

• 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 张图像进行动画运行（旋转和淡入淡出），从而对比不一样平台的性能。

Android

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

iOS

• 1. iPhone 6s 竟然足够强大，在3种状况下都不会下降fps。
• 2. 原生使用的资源较少，而 GPU 则最多使用。
• 3. React Native主要使用CPU进行渲染，而 Flutter 使用GPU。
• 4. React Native 使用了更多的内存。

总结

对于平常应用上须要使用的动画和炫酷UI，不管哪一种技术都不会有太大障碍，可是若是要一些繁重的动画的状况下，原生才能得到最好的性能，接下来才是 Flutter 和 React Native。

另外这里不建议在须要 CPU 繁重的操做中使用 React Native，而 Flutter 从 CPU 和内存的角度来可能会比较适合此类任务。

固然选择什么框架工具取决于不一样的业务场景，若是是须要开发单平台MVP(最小可行性产品)，那最好使用原生Native开发，而 Flutter 的优点仍是在于能够为移动、Web、PC等构建相同的 UI 逻辑，尤为是在初期开发预算毕竟紧张，而后还须要性能不错的状况下，固然这还和你的自己的技术栈有关系。

另外在 1.17 版本开始，底层绘制上 Android 可能会用到 Vulkan，而 iOS 可能会是 Metal，这主要和硬件还有系统版本有关系，好比在支持 Metal 的 iOS 上 Flutter 的性能绘制能够提升 50% 。