跨平台技术（Hybrid、RN、Weex、Flutter）优缺点对比盘点

跨平台技术发展的三个阶段

• 第一阶段是混合开发的Web容器时代
  • 为了克服原生开发成本高、效率低的问题，混合开发应运而生
  • 依赖于浏览器的WebView依附于原生
  • 能在Web浏览器中实现的需求，其实在WebView中也能实现
  • 但是Web最大的问题是性能和原来的开发体验存在差异
  • 因此不适合对性能和用户体验要求较高的场景
• 第二阶段是以 RN、Weex 为代表的泛 Web 容器时代
  • RN 削减了功能 Web 标准
  • 用户体验更接近原生
  • 由于功能的削减，RN 业务支撑能力不足 5% browser
  • 所以只适用于中低复杂度的低交互页面。面对比较复杂的交互和动画需求，需要通过调用原有代码进行扩展来实现。 Fuchsia SDK系统
  • 使用Dart语言开发APP
  • 一套代码可以运行在iOS和Android平台
  • Flutter使用自己的原生渲染引擎来显示视图，完成了封闭组件的渲染。本身
  • RN、Weex 等框架只是通过 JavaScript 虚拟机扩展来调用系统组件，最终由 Android 或 iOS 系统完成组件渲染

我们来看看混合 APP 开发的几种类型：

Web APP Framework

ionic

Ionic Framework 是一个使用 HTML、CSS 和 Java 技术开发基于 Web 技术的智能设备 APP 的框架。使用ionic框架开发混合模式的移动APP开发框架；

优点

• 完整的UI组件
  Ionic框架对于外观和体验非常重要，因此它提供了很多UI组件来帮助开发者开发APP，比如标签刷新等。界面美观，开发者可以快速上手，开发的app非常实用。
• 易于维护代码
  ionic框架基于AngularJS，也支持AngularJS特性。它遵循标准代码并且易于维护的代码。可以集成AngularJS
• 支持跨平台
  可以在主流的Android操作系统和ios操作系统上运行，或者其他操作系统也可以支持
• 许多强大的命令行♽♺和框架可以广泛使用应用
  可以编译成各种平台的应用

缺点

• 内存占用较高
• 不适合所有游戏类型应用♽❀❀对于性能使用较多的地方，原生思维无法作为补充发挥彼此的优势，比如高体验互动、动画等。

Cordova

Cordova 提供了一组与设备相关的 API；通过这套API，移动应用程序可以使用JavaScript来访问本机设备功能，例如摄像头、麦克风等； Cordova还提供了JavaScript类库的统一集合，以及这些库使用的特定于设备的本机后端代码； Cordova 支持以下移动操作系统：iOS、Android、ubuntu 手机操作系统、Blackberry、Windows Phone、Palm WebOS、Bada 和 Symbian。

通讯

• 通讯原理
  1. 存储插件文件名和地址 Cordova_plugin.js
  2. 当 API 插件调用时，Corova 调用 API 参数存储在 Commandec 队列中。模块。CALLBACK 存储在 JS 端的回调映射中
  3. 添加一个空的 iframe，iframe 的 src 显示间隙中 iframe 的 src： // 准备好
  4. 3.在 NATIVE 端设置 iframe 的 src 后，调用 UIWebviewDelegate#shouldStartLoadWithRequest
  5. 当 Delegate Webview 定义间隙时： // 准备好，执行 commandDelegate 处理 Delegate 出参数。 JS端的API，以及通过UIWebview#stringByEvaluatingJavaScriptFromString的返回值将CommandQueue中的参数转换为JSON数据的内部实现
  6. 根据插件6，执行NATIVE定义的插件示例
  7. 插件中，如果有CALLBACK，成功或失败的结果会通过UIWebview#stringByEvaluatingJavaScriptFromString执行。 JS端会根据传入的CALLBACKID执行JS。回调映射接受回调函数并执行
• 通信方法
  • iframe 方法（默认）
  • xmlHttpRequest 方法（推荐 iOS5.x 版本，因为 IFRAME from）-scroll♽ 有 BIG Process Import 插件
    • Native

      - APP启动，MainViewController初始化之时，queue和command的DELEGATE初期化
      - config.xml文件解析，插件名设置到数组，插件文件和插件名设置到pluginMap,属性设置到setting
      - 在Webview类里面，加载index.html,index.html里面加载cordova.js、开始初期化

    <code>- APP启动，MainViewController初始化之时，queue和command的DELEGATE初期化 - config.xml文件解析，插件名设置到数组，插件文件和插件名设置到pluginMap,属性设置到setting - 在Webview类里面，加载index.html,index.html里面加载cordova.js、开始初期化 </code>
    • JS

      - 加载cordova.js时、内部的事件设置模块，NATIVE交互模块，初期化模块，插件加载
      - 插件模块是cordova_plugins.js文件定义的插件文件地址，文件名保存的MAP
      - deviceready事件发布后，插件的API可以使用了
      - 插件API执行后，模块MAP将插件文件加载，执行exec函数
      - 在index.html里面添加一个空的iframe、指定src=gap://ready，通知到Nativie

    <code>- 加载cordova.js时、内部的事件设置模块，NATIVE交互模块，初期化模块，插件加载 - 插件模块是cordova_plugins.js文件定义的插件文件地址，文件名保存的MAP - deviceready事件发布后，插件的API可以使用了 - 插件API执行后，模块MAP将插件文件加载，执行exec函数 - 在index.html里面添加一个空的iframe、指定src=gap://ready，通知到Nativie </code>

  优点

  • iOS和Android可以共享代码；
  • 纯Web思维，快速开发，简单便捷，一次编码，随处运行；
  • 如果熟悉 Web 开发，则可以很好地打包全面的文档和系统级支持。所有UI组件均以HTML模拟并统一工作；
  • 可在线更新并允许从web js动态加载；
  • 文档很多，开发者很多问题很容易解决，技术也成熟；

  缺点

  • 需要更多内存；
  • 不适合游戏类型应用；
  • 网络技术并不能解决所有问题，适用于能源消耗较多的地方。不可能用原创思维来获得优势互补，比如高体验交互、动画等。

  混合应用程序（Webview）

  使用Android和iOS上的Web视图容器，APP可以执行html、css和js脚本来显示网页。如果需要原生函数，请添加一个供java调用的桥接器。具有开发效率高、跨平台、支持动态发布等特点。是目前应用最广泛、最成熟的解决方案；

  Webview通讯

  • 误跳转请求拦截（不推荐）
    • 误跳转重定向请求拦截是从网页发出新的跳转请求，跳转目的地是根本不存在的非法地址
    • 例如：wbcst ://testhost/action?params=xxx
    • 模拟http网络协议请求scheme://host/action?params
    • 客户端会无差别拦截所有请求。必须照常输入实际的 URL 地址。客户端只拦截与协议域名匹配的URL地址
    • JS调用方式
      1. a标签跳转
      2. location.href跳转
      3. iframe跳转
    • 不建议Android系统有url参数字节数限制，无法进行大数据通信
  • 弹窗拦截（不推荐）
    • 警报
      • 出现提示框，只能点击确认，不能回拨
    • 确认
      • 出现确认框（确认、取消），可以再次调用
    • 提示
      • 出现输入框，可以让用户输入任何内容，可以再次调用
    • 不推荐，会任意拦截所有前台窗口弹窗
  • 注入JS上下文（推荐）
    • iOS
      • WKWebView scriptMessageHandler注入
    • android♽接口J注入功能
      • 不使用任何拦截方法，而是直接将原生对象（或函数）注入到JS中，可以直接从Web调用js代码，直接操作

  WebView渲染引擎设计上的缺陷

  • JS Execute、Layout、Paint都在主线程并且不能并行化。
  • JS性能跟不上Native Tookit Java Dart Object-C等编译型语言，在执行复杂逻辑时会卡住。
  • 渲染管线过长，导致浏览器对待合成器动画和非合成器动画不同，非合成器动画表现不佳。
  • OpenGL 旨在推荐单线程模型。一个上下文一次只能运行一个线程。GPU 线程在单独的 GPU 进程中运行。 Render进程无法从GPU进程访问OpenGL Context，两个进程也无法共享Texture资源。 Render进程只能输出Bitmap/Command Buffer并通过IPC传递给GPU进程。无法从 GPU 进程直接在 Open GL Context 中进行光栅化，因此很难利用现代 GPU 的性能。
  • 光栅化是异步完成的。执行惯性滚动时，会出现白屏。这是Webview无法避免的问题。
  • 设备平台众多，必须兼容CPU渲染，All In GPU设计成为不可能。

  优点

  • 跨平台
  • 开发周期短，成本低
  • 用户体验好
  • Bug可立即修复，动态发布
    • 模仿原生iOS效果复杂
    • 模型兼容性

    ReactNative/Weex 跨平台技术

    该技术优化了前端生态和 Native 生态的复用，在前端收集并生成 Native View 组件。 - 最后的技术系统。该方案与浏览器最大的区别在于Script执行和Native View渲染系统。IReactnative

    进程通信（OC） ① JS 调用 OC 模块暴露的方法

    ② 将调用方法分解为 Moduleename、Methodname、Argument，扔进♽Queue JS 供 JS 进程使用。 JS 回调函数缓存在MessageQueue的成员变量中，并生成CallbackID来表示回调；将MessageQueue中保存的模块配置表中的ModuleName、MethodName改为ModuleID、MethodID

    ④并将ModuleID、MethodID、CallbackID等参数改为传递给OC(JavaScriptCore)

    接收消息⑤获取对应模块并通过表模块配置的方法

    ⑥RCTModuleMethod处理js模块方法传递的参数

    ⑦执行OC并执行块回调

    ⑧在RCTM步骤块⑨块中调用CallbackID和传递的参数块。去掉在js中使用MessageQueue方法invokeCallbackAndReturnFlushedQueue

    ⑩MessageQueue通过CallbackID找到对应的js回调方法

    ⑪调用回调方法并传入OC带来的参数完成回调

    即使它不能一次编码并在任何地方运行，即使两套代码具有相同的jsx语法，使用js开发。用户体验比HTML更高，开发效率更高。仅仅了解网络技术是不够的。当正式封装的控件和API不能满足你的需求时，你需要了解一些原生的东西来扩展它。可扩展性仍然比网络便宜，比直接编写本机代码便宜。

    Weex

    实现原理

    Weex 通过 Rax 和 Vue 前端框架实现函数对外输出。前端框架中有一个JS Framework层来实现dom功能。WeexCore负责基础的Flex Layout，然后通过Components连接Android/iOS系统的Native View平台。

    优点

    • Android Native使用更轻量级的渲染管线，可以更快、更高效地响应事件；
    • RenderThread直接操作OpenGLContext并进行Direct GPU Raster，充分发挥现代GPU的特性，提供高性能的渲染性能和流畅的体验；
    • 有些操作需要时间，比如Bitmap上传Texture，TextureThread上传到Share Open GL Context，Texture完成后，通知主线程进行绘制，通过Share Open GL Context与主线程共享Texture等资源。 WebView只能在渲染过程中显示纹理。 RenderProcess不能与GPU进程共享纹理和其他资源；
    • Android Native 拥有 RecycleView ViewPager 等高级组件，每个高级组件都实现了性能最佳实践；浏览器中Advanced Components只能通过JS模拟实现，优化定制效率低；
    • 浏览器管道设计复杂，必须考虑PC、手机、嵌入式设备等各种复杂环境。许多设备没有 GPU，只能进行 CPU 渲染。不可能像Android Native系统那样进行All In GPU系统设计来充分利用现代GPU的性能。

    缺点

    Weex 系统将 Native View 系统完整复现到前台系统。在封装Android/iOS Native View的过程中，有很多障碍无法解决

    Flutter自绘引擎

    Flutter是Google发布的一个框架，用于创建跨平台、高性能的移动应用。Flutter 与 QT mobile 一样，不使用原生控件。不过他们做自己的绘图引擎，使用自己的布局和绘图系统

    Framework

    基础设施主要分为三个部分：

    • Framework
      • SDK，类似于Dart的作用。 JavaScript 中的 React
      • 它实现了一组处理动画、绘图和运动的基础库
      • 它封装了一组基于图像的 UI 组件库
      • 根据两种不同的视觉风格 Material 和 Cupuishedertino。
    • Engine
      • 纯C++实现的SDK
      • 包括
        • Skia引擎
        • Dart运行时
        • 非运行文本等。 JIT 或 AOT 模式下的代码
        • 该运行时还控制 VSync 信号传输、GPU 数据加载等，还负责将客户端事件发送到运行时代码
      • Embedder
        • Embedder 是一个操作。系统适配层
        • ，实现适配
          • 渲染表面设置
          • 线程设置
          • 平台插件和其他平台相关功能

      GPU 渲染进程与 UI 线程同步

    • UI 线程使用Dart构建抽象视图结构（这是Framework层的工作）
    • 绘制的抽象视图数据结构是在GPU线程上合成的一层（在Flutter Engine层的工作中）
    • 然后给出到Skia引擎渲染到GPU数据，最后通过OpenGL或Vulkan提供给GPU

    优点

    生产力高。 Android和iOS应用程序可以使用一组代码进行开发； Dart语言的优越性使得相同的功能需要更少的代码；更方便的重复、热重载功能；

    创建优雅且可定制的用户界面。 Flutter 有一个内置的 UI 组件库，用于 Material Design 和 Cupertino（类似 iOS）；提供可定制的UI组件，不再受OEM控制限制；

    具有便携式GPU加速渲染引擎和高性能Native ARM代码运行时，可提供高质量的跨平台用户体验。

    缺点

    Flutter 是使用 Dart 语言开发的，Dart 语言是一种特殊的语言，需要重新学习一切。

    横向比较

    内容比较	ReactNative	weex	Flutter JavaScript	原生编码	H5引擎	JSCore	JS V8	Flutter 引擎	Webview 语言‷Flutter 引擎	Webview 语言 Coract Vue Dart	JavaScript打包捆绑文件	标准单个文件为足够大（无法解压）	较小，多个页面不需要	前面 JS、CSS 类型 Crossform
    中	中 中到上 顶
    热更新	好 尚未	好
    性能	中	中	中上衣