Flutter vs React Native 性能测试结果

Flutter vs React Native性能测试结果：谁才是王者？

大家好，我是猫哥。今天会去讲一下Flutter和React Native的性能比较的情况。

首先说一下React Native猫哥最早的一批去使用的，因为那个年代都是处于ipad1和ipad2那个年代。最早的时候都用的是v-ray 6去渲染，加一些动画，切换时候会有卡顿这种情况，然后就会不敢去用动画。

用了React Native写了点测试，发现它的动画效果还是挺好的，体验也不错，所以就开始尝试用React Native，后来发现它的生态也好，性能也好，也是不错的。

前些年猫哥也是把Flutter引入团队，用在了一些小的项目，比如有二十个配角这种页面的项目，也是发现Flutter生态也是比较活跃的，性能也是让我们感觉也不错。最好的一点就是Flutter做两端的适配成本会比React Native低，真的是这样。

如果对Flutter开发感兴趣可以看一下猫哥的学习站，猫哥的课程也是渐进的设计，从基础到进阶，让你快速的去落地应用，去上线。同时猫哥还整理了一个资源站，这个站把一些优秀做的插件根据分类去整理了一下，还把一些优秀的开源的Flutter项目也整理出来了，还写了一个排名。

所以假如正在找这些资料可以来看一下，关于这一块先讲到这里，一起来看一下今天测试的方法。

有同学在把代码放在了github上面，它是提供了三个程序，这边给大家跑一下。

·第一个程序是做了一千行的大列表，第一张图是不动，第二张图是旋转，这是大列表，可能是考验滚动的情况。

·第二个就是开了两百个图片，又是旋转，又是放大缩小等，做了一些这样的操作，全是动画。

·第三个是跑了一些lottie的动画，是这样的情况，跑起来之后电脑已经百分之九十九了。

继续说测试基准测试过程，三个app已经知道了，是在M1 Mac上的机器上去跑的，这个系统是跑在安卓上面跑一端，因为安卓ios现在情况有点复杂，在安卓上就会去跑。

性能收集是用安卓的profiler的工具在做收集cpu和内存的情况，FPS帧数是分别用他们自己带的生态的开发工具的监控的数据在看。框架版本是React Native 0.74，这个版也是一个稳定版，现在好像最新的是零点七五。Flutter 是三点一九，其实现在比较好的渲染引擎是三点二，他没有用，用三点一九都是比较保守的方案。

直接来说结果。

·第一个，刚才看到的一个大列表，一千行的大列表。

·来看结果，第一个就是 apk 打包完之后，官方默认模板打包完之后，Flutter 是控制在了二十兆以内，其实这个还可以了，就没差多少兆。

·帧数就是Flutter是稳定的六十帧，这边React Native 52.5，差一点点。

·内存就是React Native会多一点，在滚动的时候是比较关键，滚动的时候看内存回收情况，React Native 就是比较高，不回收也是有道理的，可能是为了性能好一点，因为频繁的去释放内存是耗cpu的。

·cpu的使用，这边React Native 还是有点高，这其实是需要优化的，可能是跟引擎有关系，所以整体来说还是React Native的内存和cpu消耗在滚动的时候会高一点。

·再看第二个，不是有很多图片又旋转又透明什么的吗？一个是 apk 的size，React Native 还是会大一点。帧数基本上持平，这个还是很不错的，React Native 处理这种图片的还是不错的。就是 React Native 内存有点夸张，内存占用比较高。cpu也高，就是耗资源。

·也说到了一点，就是在动画启动的时候React Native 出现了FPS下降，这个情况其实还是跟引擎有关系，这是比较根本的东西。

·最后是 Lottie 的动画的测试，测试时候发现React Native apk size还在高，FPS不错。在引擎对Lottie的动画的处理上面还是帧数有保证。内存占用有点高，cpu有点高的比较多一点，所以还是有待优化的。

这边也是说了，如果Lottie在3.22上应该会有明显提升，因为3.22的目标是能够跑游戏引擎，所以未来Flutter 的引擎还会更好一点。

启动项目的对比就是从代码到运行整个过程消耗，创建app可以看到React Native 非常高，但是可能不太准，因为第一次会去下载依赖包，跟一个React Native 的同学应该是知道的，有很多依赖包要去下载。其实这个不太准，为什么？安卓本身会有一些依赖项。

同样的问题，在Flutter 上面也是会有这样的问题存在。启动程序方面，这种其实差别不是特别大的，一秒钟，这种几秒钟其实还可以，就是JS Bundle Time，Flutter不存在的。apk size，React Native还是比较大，就算指定cpu类型还是比较大，这个是需要瘦身的。

最后说个结论，还是Flutter整体来说，不管是尺寸、cpu、内存、滚动的消耗都会比rReact Native 性能好一点。

今天就快速的讲了一下关于Flutter 和 React Native的对比情况，谢谢大家。更多内容点击主页查看。