在实际应用中，我们会根据不会场景选择不同方案，这里主要分析一下，各个平台的优缺点。
演进阶段
方向
- Webview技术
- 原生渲染
- 自渲染技术
一.Webview 技术
主要依赖于WebView的技术，功能支持受限，性能体验很差，比如PhoneGap、Cordova、小程序。
优点:
- 1、5+app：通过WebView包裹网页，一般 5+app。
优点:
开发模式比较灵活。既可以做到动态化更新，有 bug 直接更新线上 H5 页面；
可以使用桥接（JS Bridge）来调用系统的摄像头、相册等功能，功能就不仅仅局限于浏览器；
缺点:
受限于浏览器 DOM 的性能，导致对一些场景很难做到原生的体验，比如长列表。
- 2、小程序：寄生在其他app里面，本质上也是webview，宿主环境提供了很多api；
优点:
开发成本较低;
不用安装，即开即用，用完就走。省流量，省安装时间，不占用桌面;
缺点:
小程序只能展现一部分的核心功能;
二.原生渲染
使用JavaScript作为编程语言，通过中间层转化为原生控件来渲染UI界面，比如React Native、Weex。
- 3、React Native/Weex：通过js的虚拟dom映射，借助排版引擎构造原生页面排版，通过 Bridge 去通知 Native 绘制界面，最终还是 Native 渲染的
优点:
所以性能上比 Hybrid 更好 缺点:
受限于 JS 和 Native 通信的性能消耗，性能上依然不及 Native；
RN 不仅需要多次序列化，不同线程之间还需要通过 Bridge 来通信，效率低下。
三.自渲染技术
自行实现一套渲染框架，可通过调用skia等方式完成自渲染，而不依赖于原生控件，比如Flutter、Unity
- 4、Flutter：使用dart语言，渲染引擎先把 Dart 构建的视图数据传递给 Skia，然后 Skia 加工数据交给 OpenGL/Metal 这两个图形 API，最终交给 GPU 渲染；
优点:
Flutter 放弃了 Web 生态，RN 拥有 Web 成熟的生态体系，工具链更加强大。 Flutter 将 Dart 代码 AOT 编译为本地代码，通信接近原生。 缺点:
Flutter 官方暂时不支持热更新，RN 有成熟的 Code Push 方案；
需要学习一套新语法
- 5、 Kraken
使用DOM API构建视图和样式，直接对接dom api，通过platform的抽象调用具体平台的API（dom的增删改成 转为调用 平台的API）
- Kraken 的 runtime 通过 JS Engine Binding 的方式提供了一系列 Web 标准的 API 接口，调用相应 API 会执行相关逻辑并创建一系列需要发送给 Dart 层处理的指令，指令通过一个 struct 进行存储。
- C++ 通过 FFI 将相应的指令底层的 address 发送到 Dart 这边，Dart 处理相关指令并生成 Dom Tree。同样的，CSS 也会通过 Parser 生成对应的 CSSOM Tree，最终会结合生成 Flutter 的 RenderObject Tree.
详见：
<浅谈移动端开发技术>、
<北海 Kraken技术原理>
欢迎关注我的前端自检清单，我和你一起成长
