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

相关推荐
gCode Teacher 格码致知2 小时前
Pandas教学-17:Series与Dataframe的关系
开发语言·python·pandas
发量惊人的中年网工2 小时前
分公司访问总部ERP慢怎么办?SD-WAN组网的排查与验收要点
服务器·开发语言·php
下页、再停留2 小时前
【C#桌面客户端系列学习-15】生成可视化图表之折线图、柱状图、饼状图
开发语言·c#
撩得Android一次心动2 小时前
Jetpack Compose 知识点整理2【个人用】
android·笔记·学习·kotlin·compose
ShineWinsu2 小时前
对于JavaScript:操作元素的解析
开发语言·前端·javascript·面试·web·dom·元素
是真的小外套3 小时前
2024年软考中级信息安全工程师|选择题考点+案例分析真题解析(含答案)
android·网络
益莱储中国4 小时前
深度解析:RF 实验室从 5G迈向 6G 的过程中保持技术领先与设备升级的路径
开发语言·php
benchmark_cc5 小时前
Python 量化系统如何设计统一的数据访问接口:从策略解耦到数据层架构
开发语言·python·数据分析·pandas·量化交易·股票数据·quantdash
const_qiu5 小时前
第四章 00:开篇 —— 从「会聊天」到「记得住、会干活、能协作」
java·开发语言·人工智能·python
Wang's Blog5 小时前
Java 项目实战: 交友项目 - 个人资料管理的更新接口实现与坑
java·开发语言·交友