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

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

原生开发的优势

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

它的劣势

1. 仅支持特定平台，开发成本高（Android、iOS）
2. 动态化差，改bug基本上只能发版。

但是目前面临的问题是

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

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

1. H5+原生：Hybrid
2. JS+原生渲染：RN
3. 自绘UI+原生：Flutter

针对原生开发的劣势，其实也有一些解决方案

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

Hybrid

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

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

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

这里也有一些解决方案

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

RN

RN实际上可以理解为js+映射原生空间绘制。

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

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

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

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

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

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

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

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

它的优势在于

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

它的劣势在于

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

Flutter

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

它的优势

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

它的劣势

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

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

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

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

总结

平台	优势	劣势
原生	1.能访问平台的全部功能 2.速度快，性能高	1.平台特定，开发成本高 2.不支持动态化
Hybrid	web技术栈，社区资源丰富	性能差，复杂的界面和动画，难以支持
RN	1.web技术栈，社区资源丰富，上手成本低 2.原生渲染，性能比h5高 3.支持动态化，热更新	1.渲染时需要JS和原生通信，拖动时可能因为通信频繁卡顿 2.执行时时JIT，执行效率低 3.渲染依赖原生控件，当系统更新时，RN的更新可能不及时
Flutter	1.Flutter社区生态越来越丰富 2.性能高，支持AOT 3.自绘UI引擎，不同平台展示效果一致 4.开发JIT，编译AOT	1.不支持动态化 2.开发效率低

参考

《Flutter实战》

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