技术编程|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 张动图
文章图片
推荐阅读
- 技术编程|后台权限管理设计思路：三种模型分析
- 技术编程|如何利用数据库进行世界史研究
- 青年|西安邮电大学与安康汉滨区深度合作，研发适合毛绒玩具全产业链实用技术
- 无人科技,电池技术|盘点几种常见的无人机电池
- 行业互联网|让青少年爱上科学 核桃编程AI人机双师模式受关注
- 技术编程|无服务器调研，部署REST API是最普遍用例
- 京东,折叠屏手机|围绕柔性屏的技术、特性、应用、产业化进行了非常专业的解读
- 云计算|腾讯云小微首次技术开放日，揭秘AI语音背后的奥秘
- iQOO手机|“快稳双全”！120W超快闪充技术炫技，十五分钟充满电量
- 驱动中国|国内首次应用！支付宝开放宠物鼻纹识别技术：猫狗都能买保险