移动端跨平台开发技术演进
现在主流的移动开发平台是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条数据,在三款低中高端机型中测试。
性能测试结论:
以上只是一个简单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不断的改进相信在不远的将来会实现这个可能。