Android跨平台技术对比

从HybridApp到RN&＃xff0c;再到Flutter&＃xff0c;跨平台技术的发展十分火热&＃xff0c;在平时的业务开发中&＃xff0c;跨平台也往往由于其动态性&＃xff0c;开发速度&＃xff0c;节省人力而占据越来越大的比重。以下简单对比一下跨平台技术

为什么纯原生开发不占优势了

原生开发的优势

1. 速度快&＃xff0c;性能好。在进行一些复杂的动画绘制时&＃xff0c;体验更好。
2. 一些硬件的访问&＃xff0c;像摄像头、GPS都可以直接访问&＃xff0c;省去了通过跨平台框架协议兼容的中间件。

它的劣势

1. 仅支持特定平台&＃xff0c;开发成本高&＃xff08;Android、iOS&＃xff09;
2. 动态化差&＃xff0c;改bug基本上只能发版。

但是目前面临的问题是

1. 动态化需求变多了&＃xff0c;发版更加频繁&＃xff0c;但是发版审核都需要时间&＃xff0c;而且过于频繁的版本更新也会影响用户使用&＃xff0c;有点跟不上互联网的高度发展
2. 需要Android和iOS两端开发&＃xff0c;两个技术团队&＃xff0c;人力成本高

所以这些跨平台技术越来越流行&＃xff0c;大幅度压缩了原生开发的比重。常见的跨平台技术主要有三种

1. H5&＃43;原生&＃xff1a;Hybrid
2. JS&＃43;原生渲染&＃xff1a;RN
3. 自绘UI&＃43;原生&＃xff1a;Flutter

针对原生开发的劣势&＃xff0c;其实也有一些解决方案

1.  布局动态化&＃xff0c;服务器下发布局&＃xff0c;客户端解析加载
2. 热修复&＃xff0c;如腾讯的thinker等&＃xff0c;但是对Android新版本的支持好像不是很好

Hybrid

简单理解为网页&＃xff0c;webview执行h5代码&＃xff0c;本质上是个浏览器内核&＃xff0c;js运行在权限受限的沙箱中&＃xff0c;想访问原生的一些功能&＃xff0c;如蓝牙&＃xff0c;只能通过调起原生的代码实现。基本上主要是JS通过JsBridge调用原生的一些功能。

他的优势在于web技术栈已经很成熟了&＃xff0c;资源都很丰富。

劣势也很明显&＃xff0c;慢&＃xff0c;性能差。复杂的业务界面及动画&＃xff0c;卡。

这里也有一些解决方案

1.  提前将页面的公共资源html&＃xff0c;css&＃xff0c;js模板化&＃xff0c;动态下发到app&＃xff0c;在shouldInterceptRequest拦截webview的资源加载&＃xff0c;判断本地模板的资源就直接加载本地的&＃xff0c;没有则再去加载线上资源
2. 数据请求由app代理&＃xff0c;让数据加载和模板代理并行执行
3. webivew复用&＃xff0c;构建一个webview池&＃xff0c;每次进入h5页&＃xff0c;从webview池中取出webview
4. 图片优化&＃xff0c;通过shouldInterceptRequest拦截图片资源并下载

RN

RN实际上可以理解为js&＃43;映射原生空间绘制。

以下简单理解一下DOM树&＃xff0c;文档对象模型是表示和处理一个html和xml文档的标准接口&＃xff0c;DOM树就是文档树&＃xff0c;与用户界面的控件树相对应&＃xff0c;也可以与Android的xml布局文件的控件树相对应

React框架运用的是典型的响应式编程&＃xff0c;状态改变则UI随之改变&＃xff0c;它是响应用户状态改变的事件而构建用户界面。它的好处是

1. 开发者只需要关心状态&＃xff08;数据&＃xff09;&＃xff0c;状态改变了&＃xff0c;UI自然会改变
2. 当接收到用户状态改变的通知时&＃xff0c;根据当前渲染树&＃xff0c;通过diff算法&＃xff0c;算出树中变化的部分&＃xff0c;然后只更新改变的部分&＃xff0c;避免整个树重构&＃xff0c;提高性能

此处&＃xff0c;React框架也不会立即就刷新界面&＃xff0c;而是抽象出一个虚拟DOM层&＃xff0c;改动先同步到虚拟DOM层上&＃xff0c;然后再批量同步到真实DOM上&＃xff0c;因为浏览器的每次DOM操作都可能引起浏览器的重绘或回流。

RN中的虚拟DOM树最终会通过JavascriptCore映射为原生控件树。JSCore是一个JS解释器&＃xff0c;作用跟JSBridge差不多

1. 为JS提供运行环境
2. 是JS与原生通信的桥梁

RN中虚拟DOM树映射为原生控件有两步

1. 布局消息传递&＃xff1a;将虚拟DOM布局信息传递给原生
2. 原生根据布局信息通过对应的原生控件渲染控件树

它的优势在于

1. web技术栈&＃xff0c;社区大&＃xff0c;上手快&＃xff0c;成本低
2. 原生渲染&＃xff0c;比H5好很多
3. 动态化好&＃xff0c;支持热更新

它的劣势在于

1. 渲染时需要和JS通信&＃xff0c;某些场景下可能造成卡顿&＃xff0c;如拖动
2. JS为脚本语言&＃xff0c;执行时需要JIT&＃xff0c;效率比AOT慢
3. 渲染依赖原生控件&＃xff0c;不同的平台的控件需要单独维护&＃xff0c;并且系统更新&＃xff0c;社区控件可能延时&＃xff0c;并且收到原生控件的影响&＃xff0c;比如存在手势冲突问题

Flutter

Flutter是自绘引擎加原生&＃xff0c;在不用的平台实现一个统一的渲染引擎接口来绘制UI

它的优势

1. 性能高
2. 灵活&＃xff0c;组件库容易维护&＃xff0c;UI保真度和一致性高

它的劣势

1. 动态性不足&＃xff0c;Flutter是AOT模式编译的aar包&＃xff0c;不能像JIT那样动态下发代码
2. 开发效率低

Flutter相对一般的自绘引擎的优势在于

1. 生态原来越丰富了&＃xff0c;Flutter社区、Github资源原来越多
2. Google也在推广Flutter
3. 开发效率上来讲&＃xff0c;Flutter的热重载可以更快的构建UI&＃xff0c;添加功能&＃xff0c;修复问题

Flutter采用自己的高性能引擎绘制widget&＃xff0c;可以保证一致性&＃xff0c;也可以避免对原生控件的依赖。在开发时&＃xff0c;Flutter是JIT模式&＃xff0c;开发效率比较高&＃xff0c;在打成release包的产物时&＃xff0c;它是AOT模式&＃xff0c;它的运行效率比较高。而且因为它是自己的渲染引擎&＃xff0c;在滑动和滚动场景下具有明显的优势。

总结

参考

《Flutter实战》

Android WebView H5 秒开方案总结 - 掘金