浅谈跨平台框架的演变(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对象创建和销毁优化。