浅谈跨平台框架的演变（H5混合开发-＞RN-＞Flutter）

引言

这里分为四个阶段：

第一阶段 ： 原生开发

第二阶段 ： H5混合开发

第三阶段： 跨平台RN

第四阶段： 跨平台Flutter

正文

第一阶段： 原生开发

开发成本比较大 ： 需要Android 和ios 开发两端。

动态化需求 ： 需求变化 需要发版本。

第二阶段：H5 混合开发

WebView 担任桥梁JavaScript 与原生API之间通信的Bridge桥梁。

用于在javaScript 与原生之间的通信工具 WebView javaScript   Bridge （JsBridge）

如图：

缺陷：

WebView 性能堪忧 

webView 会引起内存泄漏。Android 自身问题，webView 在运行中，消耗的内存无法及时回收。

所以我们在用webView 把它移到一个单独进程中。

Android WebView性能优化（一） - 简书

WebView内存泄露的解决方案 - 简书

WebView内存泄露终结解决方案 - 简书

Android调用js的坑 - 简书

第三阶段 ： 跨平台RN

H5 作为第二阶段的性能瓶颈， RN通过桥梁完成原生绘制 ，以达到更优的性能。

讲解：

用js写出配置文件（相当于xml），通过bridge 发给平台，然后平台根据配置文件去创建相应的原生控件。所以RN渲染方式是用原生方式渲染。

缺陷：

javaScript 通过 Bridge 传递到native完成原生绘制，bridge的成本高，因为需要频繁的跨桥调用，导致卡顿等性能。

第四阶段 ：跨平台 Flutter

那么我们就要考虑能不能干掉“桥” ， 所以flutter就是干掉了桥，利用DVM（dart虚拟机）减少桥的交互。

原理如下图:

Flutter 架构

 

framwork 提供了各种基础组件库，包括widget。动画等。

Engine  Skia渲染。Drat VM 等。

 

性能和特点：

性能稍微低于原生。

单线程，不存在上下文切换的性能损耗 ；不需要锁 不存在数据竞争和数据同步问题。

多生代无锁垃圾回收器，专门为ui框架中常见的大量Widgets对象创建和销毁优化。