几种跨平台技术的比较

权威文档 https://ask.dcloud.net.cn/article/36083

混合APP分类

目前 Hybrid App 主要分为两类:

• (1) 通过 WebView 加载本地网页，App 相当于本地网站。如 PhoneGap、Cordova、IOnic。
• (2) 原生控件的跨平台抽象，如 ReactNative、Weex。

ionic

Ionic(ionicframework)一款开源的Html5移动App开发框架,是AngularJS移动端解决方案,Ionic以流行的跨平台移动app开发框架phoengap为蓝本，让开发者可以通过命令行工具快速生成android ios移动app应用

通俗的讲：ionic是一款基于angularjs的html5移动app开发框架

就可以把ionic当作一款html5 移动app框架，把phonegap/cordova 当作打包 并且调用原生的框架就可以了
为什么ionic也可以打包,因为ionic的打包插件是基于phonegap/cordova的

phonegap/cordova

1. phonegap

• PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动.

• phonegap就是一款可以打包并且可以让js调用原生的移动app框架

Ionic/Angular和Cordova

可能会有人被问道：“Cordova比Ionic/Angular好吗？”，这就很尴尬了，根本是毫无意义的问题。它们在混合开发中扮演的是不同的角色–Ionic/Angular负责页面的实现，而Cordova负责将实现的页面包装成原生应用（Android:apk；iOS:ipa）。就像花生，最内层的花生仁是Angular，花生仁的表皮是Ionic，而最外层的花生壳则是Cordova。包装完成之后我们的页面才有可能调用设备的原生能力，最后才能上传到应用商店被用户使用。

Cordova

Cordova的基础是html和js运行在webview容器里面,通过Cordova提供的接口与硬件通讯;所以它的效率天生收到限制,而且也受到了各个厂商对webkit内核的好坏;比如之前基于国产某Cloud的程序,在华为手机上显示就不正常,花费了不少精力修改;

React Native

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

Flutter

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

Flutter 走了不一样的路：自己开发了一套原生控件，每个平台实现一遍，然后把渲染引擎（这套控件）打包在每个应用里面，因此性能没有问题，平台差异也很小。

之所以不适用原生控件，是因为 Flutter 希望最终结果是更高质量的，如果 Flutter 使用原生系统 widget，Flutter 应用的质量和性能将受到这些 widget 本身质量的限制。

渲染机制比较

React-Native、Weex 核心是通过 Javascript 开发，执行时需要 Javascript 解释器，UI 是通过原生控件渲染。Flutter 与用于构建移动应用程序的其它大多数框架不同，因为 Flutter 既不使用 WebView，也不使用操作系统的原生控件。 相反，Flutter 使用自己的高性能渲染引擎来绘 制 widget。Flutter 使用 C、C ++、Dart 和 Skia（2D渲染引擎）构建。