flutter

flutter是 Google 为 Fuchsia 操作系统设计的利用开发方式。

Fuchsia OS要兼容便宜物联网设施，要求对硬件的耗费升高，并且为了防止与oracle的java打官司，Fuchsia 应用了dart语言+flutter界面库的形式。

比照剖析

性能剖析 和 写法比照

flutter作为界面库，它惟一要干的事件就是渲染界面。不像HTML5，flutter界面库连视频、定位等都没有，就是一个纯排版引擎，绘制文字、按钮、图片等罕用界面控件。
这个排版引擎的特点是简略、高性能。

晋升性能是有代价的，开发便利性和运行性能不可兼得。

举个例子，同样的界面，用HTML和flutter如何实现：

<div class="greybox">    <div class=redbox>      smaple text    </div>  </div>  .greybox {    display: flex;    align-items: center;    justify-content: center;    background-color: #e0e0e0; /* grey 300 */    width: 320px;    height: 240px;    font: 18px  }  .redbox {    background-color: #ef5350; /* red 400 */    padding: 16px;    color: #ffffff  }
var container = new Container( // grey box    child: new Center(      child: new Container( // red box        child: new Text(          "smaple text",          style: new TextStyle(            color: Colors.white,            fontSize: 18.0,          ),        ),        decoration: new BoxDecoration(          color: Colors.red[400],        ),        padding: new EdgeInsets.all(16.0),      ),    ),    width: 320.0,    height: 240.0,    color: Colors.grey[300],  );

能够看出，从代码的写法来说，flutter没有tag和款式的说法，更没有选择器，从头到尾只有dart语言，它的界面控件是用dart代码new进去的，每个控件的款式，是在new的时候设置的类json写法的参数。

flutter的性能高，除了简略严格，还有一个特点，就是逻辑层与视图层对立，运行在同一套dart虚拟机下。

咱们晓得rn和weex，也是原生渲染的，它们的性能高于webview。但同为原生渲染的，怎么会慢于flutter呢？其实不是原生渲染慢，而是js和原生通信慢。

rn和weex都采纳了独立的js引擎（iOS是jscore，Android是v8，最新版rn开始在Android上搞本人的js引擎Hermes），从js与dart的比拟上，性能稍逊一筹。但这不是次要问题，因为v8的jit不是盖的，也是编译为原生代码解析的。性能上的次要问题是：rn、weex的js引擎和原生渲染层是两个运行环境。

当js引擎联网获取到数据后，告诉原生视图层更新界面时，有一个跨环境的通信折损。同样，当用户在屏幕上操作原生视图层时，要给js引擎发送告诉，也会产生这个通信折损。

不过这种性能差异，在大多数场景中，用户是感触不到的。比拟影响的场景，是跟手式的js响应操作绘制帧动画，或者说js间断操作界面元素方面，flutter折损更少。

这个通信折损，其实普遍存在于所有逻辑和视图拆散的框架中，包含各家小程序也有这个问题。

说回来flutter，它只有一个dart引擎，没有来回通信产生的性能问题。不过任何事件都是有利有弊的，flutter在一般的界面绘制上效率尽管高，但一旦波及原生的界面，反而会遇到更多问题。

后面曾经说过，flutter只是一个根底排版引擎，短少很多能力，当咱们须要在flutter界面上内嵌一个原生的视频播放扩大控件时（flutter没有内置视频播放能力），或者原生的高德地图sdk，那么在拖动视频进度时、拖动地图时，flutter一样会产生原生和dart之间的通信，造成性能损耗。

事实上，因为flutter是在一个类canvas环境绘制的，想把一个原生控件嵌入flutter的布局里某些元素之间去排版，还不是一件容易做到的事件，坑很多。

性能好，有个度，主观地讲，rn/weex调用原生渲染的性能，和flutter的渲染性能，在用户体验上并没有显著区别，甚至在很多场景下，和webview渲染的小程序也没有显著区别。

也简略说说webview渲染小程序，为什么性能高，外围是预载。点击一个新页面时，webview是提前创立好的，不会走简单的webkit、v8的初始化流程，连开发者的js代码，也是预载好的。所以点击新页面时，它的渲染速度和原生利用没什么差异。当然也有个害处，就是启动慢。微信里启动小程序速度看着还行，其实是微信在启动小程序之前，就曾经提前初始化了小程序运行环境。

ui 库

不论是rn还是flutter，有一个设计，很不中国化。它们在iOS和Android平台上，应用2套ui库。

rn和flutter这种“跨平台”排版引擎，其跨平台性，对于中国开发者而言，又打了折扣。

其实相似小程序那样的ui格调，是可能良好的跨iOS和Android的体验的，不论用什么手机，关上小程序都不会感觉有问题。

uni-app默认也是这种通用ui格调。uni-app的开发者只须要写一套界面ui，就能够适应不同手机的用户，真正的 write once，run anywhere。

动态性

webview、rn/weex，都有一个特点，能够近程动静载入js代码，能够更新本地的js代码。前端开发者认为动态性是理所当然的，但其实flutter并不反对。

flutter是有编译优化概念的，如果它提供动态性反对，会影响它的性能。

除了flutter，rn/weex/uni-app都能够动静热更新。

跨平台排版引擎 和 跨平台利用开发引擎 的区别

一个页面跨平台，和一个利用跨平台，是齐全不同的2个概念。

webview、rn/weex、flutter全副是渲染引擎，webview因为HTML5的倒退，还算是多了一些能力比方位置服务、多媒体等。而rn/weex、flutter真的只是一个纯正的排版引擎，没有任何原生能力。

什么是跨平台利用开发引擎？岂但排版局部要跨平台，开发API也要跨平台。

利用开发离不开os或三方sdk的能力调用，如果是单纯的排版引擎，一旦波及os能力和sdk调用，就必须iOS、Android的工程师配合，编写不同的原生代码整合在一起。这就不跨平台了。

uni-app，它的设计指标不是跨平台排版引擎，而是跨平台利用开发引擎。

所以uni-app的排版局部，能够抉择小程序强化webview引擎和weex引擎，可依据本人的需要切换。而能力层面，uni-app提供了htmlplus API、Native.js、插件市场，解决了原生能力js化的问题。

uni-app让开发者真的不必懂原生开发就能做出残缺的跨平台利用。遇到极个别的需要，开发者也能够去插件市场找人订做一个原生插件，本人依然应用js来集成，依然能够云端间接打包。

学习老本、难度

rn，要求开发者学习react，要求精通flex布局，要求原生开发合作。

flutter，要求开发者学习dart，理解dart和flutter的API、要求精通flex布局，要求原生开发合作。

weex曾经内嵌到uni-app中，就不独自提了。

uni-app，要求开发者学习vue，理解小程序。

生态

任何开发引擎，都离不开生态。

对于国外的开发者，rn、flutter的生态必定比uni-app好，比方facebook登陆分享、Google地图等。

但对于国内的开发者，那是反过来的，中国开发者须要的全端推送（UniPush集成了iOS、华为、小米、OPPO等泛滥原厂推送）、各种国内登陆、领取、分享SDK、各种国内地图、各种ui库、以及Echart图表等，都是在uni-app体系里，这方面生态可比rn、flutter丰盛多了。uni-app的插件市场有数千款插件，不能说包罗万象，但的确是最丰盛的跨端开发框架生态了。

另外，uni-app的生态还比其余竞品强在如下方面：

  • App和H5提供了renderjs技术，使得浏览器专用的库也能够在App和H5里应用，比方echart、threejs等
  • 兼容微信小程序 JS SDK，丰盛的小程序生态内容可间接引入uni-app，并且在App侧通用
  • 兼容微信小程序自定义组件，并且App、H5侧通用

总结

flutter与uni-app的比拟：

flutter与uni-app的绝对劣势：
  • 性能好一丢丢。比rn有劣势，但比领有bindingx和wxs的weex/uni-app，在理论开发中没有很显著的差距。
flutter与uni-app的绝对劣势：
  • 须要原生合作，保护3套代码，无奈无效升高开发成本，晋升开发效率
  • 嵌套天堂，代码难看难保护
  • 不反对热更新
  • 目前品质和成熟度很低
  • 原生可视控件交融不好，比方webview、video、map
  • ui库不适宜国情
  • 学习老本高
  • 利用场景无限，dart将来错综复杂

uni-app里其实也能够应用flutter，有插件作者提供了插件，使得uni-app的利用在某些页面能够关上flutter页面

rn 和 uni-app的比拟

rn与uni-app的绝对劣势：
  • rn的坑尽管比weex的少，但uni-app曾经填了weex的很多坑。这方面差异不大。
  • rn的生态尽管比weex丰盛。但uni-app是反过来的，uni-app的国内利用生态丰盛度超过了rn。
  • rn是纯单页的，嵌入原生App比拟灵便。而uni-app是利用整体的概念，如果要内嵌入其余原生利用的话，要求原生利用内嵌uni-app利用整体进来。即集成uni小程序sdk。
rn与uni-app的绝对劣势：
  • 须要原生合作，保护3套代码，无奈无效升高开发成本，晋升开发效率
  • 不反对小程序，公布到h5也无奈间接发
  • 性能不如uni-app
  • 国内的插件生态不如uni-app丰盛
  • ui库不适宜国情，learn once，write anywhere
  • 学习老本高，用人老本高，不利于开发商升高开发成本
  • rn是纯单页利用，如果一个利用的页面很多，用rn写会很解体，变量净化和烦扰重大。而weex/uni-app反对多页面，页面之间上下文隔离，写页面较多的大型利用更适合
  • 另外react在中国的市场占有率远不如vue。这也是中国与国外不同的特色状况。

原文地址：https://ask.dcloud.net.cn/art...