前言
现在主流的移动开发平台是Android和iOS，每个平台的开发技术和运行方式都不一样，大家都是针对每个平台开发应用。自然会存在一个移动应用产品要针对每个平台开发一套的现象，这样带来的问题则是开发成本高、效率低下，进而会有进行跨平台开发的需求。从最开始以Cordova为基础的Hybrid混合开发技术，到React Native的桥接技术，到现在新兴的Flutter技术，跨平台开发技术一直在演进。
目前主流跨平台框架简介
Cordova
Cordova 是Apache旗下的一个开源的移动开发框架。它允许你使用WEB开发技术（HTML5、CSS3、JavaScript）进行跨平台开发。应用在每个平台的封装器中执行，并且依赖规范的API对设备进行高效的访问，比如传感器、数据、网络状态等等。
Cordova通过对HTML、CSS、JS封装为原生APP。Cordova将不同设备的功能，按标准进行了统一封装，开发人员不需要了解设备的原生实现细节，并且提供了一组统一的JavaScript类库，以及为这些类库所使用的设备相关的原生后台代码。因此实现了“write once, run anywhere”(一次开发，随处运行)。
Cordova前身是PhoneGap。2011年Adobe公司将其收购对其开源，并捐献给Apache，重新命名为Cordova。
React Native
React Native让开发者使用JavaScript和React编写应用，利用相同的核心代码就可以创建Web,iOS和Android平台的原生应用。React Native着力于提高多平台的开发效率-----仅需学习一次，编写任何平台（Learn once, write anwhere）。
React Native支持标准平台组件使用，在iOS平台我们可以使用UITaBar控件，在Android平台我们可以使用rawer控件。这样App从使用上和视觉上拥有像原生App一样的体验。
2015年9月15日，Facebook发布了React Native for Android，把Web和原生平台的JavaScript开发技术扩展到了Google的流行移动平台。
Flutter
Flutter是面向iOS和Android应用，提供一套基础代码（使用Dart语言）的高性能高可靠软件开发工具包，使开发者能够在iOS和Android两个主要的移动平台上，打造统一代码的高性能应用。
Flutter能够在iOS和Android上运行起来，依靠的是一个叫Flutter Engine的虚拟机，Flutter Engine是Flutter应用程序的运行环境，开发人员可以通过Flutter框架和API在内部进行交互。
在2017年的谷歌I/O大会上，Google推出了Flutter----一款新的用于创建移动应用的开源库。在2018年初世界移动大会上发布Flutter的第一个Beta版本，2018年5月的I/O大会上更新到了Beta3版本，向正式版本有迈进了一步。
移动端跨平台开发技术演进
以往最早的以Cordova为代表的Hybrid开发，主要依赖于WebView。但是WebView是一个很重的控件，很容易产生内存问题，而且复杂的UI在WebView上显示的性能不好。JS与Native代码之间的通信需要使用JSBridge进行上下文切换，因此会降低一些性能。
上图是Cordova框架原理
React Native技术抛开了WebView，利用JavaScriptCore来做桥接，将JS调用转为native调用，只牺牲了小部分性能获取的跨平台开发，这是一大步进步。但是由于依然存在一个从JS代码到原生代码的转化过程，在界面UI被频繁操作的情况下，可能会导致性能问题。
上图React Native框架原理
Flutter实现跨平台采用了更为彻底的方案。它既没有采用WebView也没有采用JavaScriptCore，而是自己实现了一台UI框架，然后直接系统更底层渲染系统上画UI。所以他采用的开发语言不是JS，而是Dart。据称Dart语言可以编成原生代码。
上图是Flutter框架原理图
关于性能
跨平台开发第一个考虑的就是性能问题
l Cordova的基础是html和js运行在webView容器里面，通过Cordova提供的接口与硬件通讯；所以它的小路天生受到限制，而且也受到了各个厂商对webkit内核支持的好坏；比如之前基于国产某Cloud的程序，在华为手机上显示就不正常，花费不少精力修改。
l React Native的效率由于是将View编译成了原生View，所以效率上要比基于Cordova的HTML5高很多，但是它也有效率问题。React Native的渲染机制是基于前端框架的考虑，复杂的UI渲染是需要依赖多个view叠加。比如我们渲染一个复杂的ListView，每一个小的控件，都是一个native的view，然后相互组合叠加。想想此时如果我们的list再需要滑动刷新，会有多少个对象需要渲染。所以它的列表方案不友好。
l Flutter吸收了前两者的教训之后，在渲染技术上，选择了自己实现（GDI），由于有更好的可控性，使用了新的语言Dart，避免了React Native的那种通过桥接器与JavaScript通讯导致效率低下的问题，所以在性能方面比React Native更高一筹。打开Android手机开发者选项里面的显示边界布局，发现Flutter的布局是一个整体，说明Flutter的渲染没用原生控件进行渲染。
自身优缺点列举
Cordova
优势：
iOS和Android基本上可以共用代码，纯web思维，开发速度快， 简单方便，一次编码，到处运行。如果熟悉web开发，文档很全， 系统级支持封装较好，所有UI组件都是有html模拟，可以统一 使用。
可实现在线更新，允许动态加载web js
文档多，开发者多，遇到问题容易解决，技术成熟
劣势：
占用内存高一些，不适合做游戏类型app, web技术午无法解决一 切问题，对于比较耗能的地方无法利用native的思维实现优势互 补，如高体验的交互，动画等。
React Native
优势：
虽然不能做到一次编码到处运行，但是基本上即使是两套代码， 也是相同的jsx语法， 使用js进行开发。用户体验高于html， 开发效率较高
Flexbox布局据说比native的自适应布局更加简单高效
可实现在线更新2015.7.28 AppStore审核政策调整：允许运行于JavaSriptCore的动态加 载代码。更贴近于原生开发
劣势：
对开发人员要求较高，不是懂点web技术就行的，当官方封装的 控件、API无法满足需 求时就必然需要懂一些native的东西去 扩展，扩展性仍然远远不如web，也远远不如直 接写Native Code。
官方说的很隐晦：learn once， write anywhere。人家可run anwhere。就是针对不同的 平台需要些多套代码。
Flutter
优势：
高生产效率。一套代码可以开发出Android和iOS应用；Dart语 言优越性，使得同样的 功能只需要很少的代码；迭代更加方便， hot reload功能；
创建优雅的、高度可定制的用户界面。Flutter内置了对Material Design和Cupertino（iOS-favor）的UI组件库；提供了可定制 的UI组件，不再受制于OEM控件的限制；
借助可移植的GPU加速的渲染引擎以及高性能本地ARM代码运行 时以达到跨平台的高质量用户体验。
劣势：
Flutter采用Dart语言开发，属于小众语言，需要一切都要重新 学习。
Flutter现在还处在Beta阶段，第三方库很少。
总结
在跨平台开发这件事情上人们一直没有停止去寻找更好、更忧的解决方案。这些框架虽然平台系统的UI框架可以取代，但是系统提供的一些服务是无法取代的。所以优化的再好都没有原生来的流畅、性能好，但是能够接受去妥协一些缺点是可以给企业提供更多的开发选择。
Cordova诞生最早收获开发者和相关技术支持较多，使用起来遇到问题比较好解决。因为纯web开发思维性能比较低，比较适合多信息展示少交互对性能没有这么高要求的应用。
React Native出现相对较早，它优化了早期Hybrid混合开发中的性能问题使其在平台表现接近于原生应用。同时因为性能上的优化也妥协了一次编写到处运行的一套代码好处，但不影响它是目前最成熟、最受欢迎的移动开发框架。
Flutter出现相对较晚，从目前官网介绍和Beta版测试可知性能和速度上更优秀，但使用Dart小众语言还取决于行业内的接受态度，新技术可能会存在一些未知的问题，还需要时间的检验。
总的来说，以上整理分析的框架的优劣都是相互的，根据产品需求和企业技术方向以及技术人员的具体情况，选择最合适的就是最好的。
作者：悯农
链接：https://www.jianshu.com/p/900bf9cbd005
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。