Flutter RN 原生对比

移动端跨平台开发技术演进

现在主流的移动开发平台是Android和iOS，之前还有过windows phone，每个平台的开发技术都不太一样。大家都是针对每个平台开发应用。自然有人就会觉得这样效率低下，想进行跨平台开发。从最开始的Hybrid混合开发技术，到RN的桥接技术，到现在新兴的Flutter技术，跨平台开发技术一直在演进。

以往最早的Hybrid开发，主要依赖于WebView。但是WebView是一个很重的控件，很容易产生内存问题，而且复杂的UI在WebView上显示的性能不好。react-native技术抛开了WebView，利用JavaScriptCore来做桥接，将js调用转为native调用，只牺牲了小部分性能获取的跨平台开发，这是一大进步。所以现在react-native很流行的原因。

跨平台开发第一个考虑的就是性能问题

RN的效率由于是将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.所以也就有了前面所说的RN的列表方案不友好;

Flutter 吸收了前两者的教训之后,在渲染技术上,选择了自己实现(GDI),由于有更好的可控性,使用了新的语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题,所以在性能方面比RN更高一筹;有经验的开发者可以打开Android手机开发者选项里面的显示边界布局,发现Flutter的布局是一个整体.说明Flutter的渲染没用使用原生控件进行渲染

 Flutter   RN  原生对比

简单总结一下Flutter与RN的异同。

1、都实现了移动端开发
2、都支持热加载，调试很方便
3、调用系统的service仍然需要封装接口，还需要懂得native开发
4、RN采用JS语言开发，基于React，受众更多，Dart语言受众小
5、Flutter第三方库较少，RN相对发展较早，但是也不是很完善

认知

性能测试：
分别用Flutter、RN、原生开发三个项目，只有一个列表页面，10000条数据，在三款低中高端机型中测试。

APK体积大小

Flutter

RN

native

启动时间

初始内存占用

稳定内存

CPU

性能测试结论：

以上只是一个简单demo通过测试得出的数据结果，仅能从大体上比较出三者的性能，可能在实际的项目中会有些出入。

1、包体积原生比较小，Flutter和RN不相上下（Ios系统需要引入Skia库，最终包体积Flutter会明显大于RN），由于Flutter和RN框架中需要一些C++依赖库，导致包体积比原生大了很多。

2、启动时间，Flutter（冷热启动时间）>RN=原生

3、内存占用，在高端手机上，flutter占用内存是大于RN的，但是低端手机Flutter的内存占用会低于RN，RN内存占用不稳定，页面刚生成的时候内存占用会高一点, 之后缓慢回落。

3、CPU占用，RN明显高于Flutter和原生，这会导致手机性能降低、耗电量增加、发热更厉害

4、主观感受，Flutter要比RN更加流畅，体验感更好，但是和原生仍有不小差距，不过Flutter还很年轻，官方宣称其性能会接近原生，甚至超过原生体验，随着Google不断的改进相信在不远的将来会实现这个可能。