这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
重点内容：
- 跨端背景
- 跨端技术方案介绍
- hybrid方案
- 原生渲染方案
- 自渲染方案
- 小程序方案
详细知识点：
一、跨端背景
跨PC端（Windows，Mac）,移动端（安卓，iOS），web端，IoT设备（车载设备，手表）等。跨端技术是为了能够用最少的开发成本来达到最好的效果，而不是每个端都需要一套单独的人力来进行维护。
常见痛点：
- 各端功能几乎一致，各端需要单独配置研发人员
- 开发维护成本高
- 安卓，iOS发版周期长
理想跨端技术方案目标：
- 研发效率高 - 学习成本低 - 多端一致性高
- 用户体验好 - 稳定性高 - 性能体验好
- 动态化 - 支持动态化下发，满足日益增长的业务需求
二、跨端技术方案介绍
1. hybrid方案
基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。依赖 WebView 进行渲染，在功能和性能上有所妥协。
WebView容器的工作原理是基于Web技术来实现界面和功能，通过将原生的接口封装、暴露给JS调用，JS编写的页面可以运行再系统自带的WebView中。
优点：
- 开发成本较低，可以跨平台，调试方便，维护成本低，功能可复用。
- CSS全集，一致性好
缺点：
- 跨端能力受限
- 无法保证原生体验，渲染效果会差，性能中等
2. 原生渲染方案
使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面。通过中间层把前端框架转化为原生控件来渲染 UI 界面，例如 React Native、Weex等，这种方案多了一层转译层性能上有损耗，数据通信也有性能瓶颈。
在React Native中，使用React组件通过JS来调用视图。在运行时，React Native为这些组件创建相应的Android和iOS试图。由于React Native组件就是对原生视图的封装，因此使用React Native编写的应用外观、感觉和性能与其他原生应用一样。这些平台支持的组件称为原生组件。
优点：
- 性能好
缺点：
- CSS子集，一致性一般
3. 自渲染方案
利用Skia重新实现渲染管线，不依赖原生组件。
Flutter 是 Google 在 2015 年开源的 UI 框架，能帮助开发者通过一套代码库高效地构建出 iOS 和 Android 上高质量的原生应用，还支持 Web、桌面和嵌入式平台开发。Flutter 使用 Skia 将界面渲染到平台提供的画布上，不需调整即可迁移到其他平台。
优点：
- 性能最好，一致性好
缺点：
- CSS子集
- Dart生态一般
- 开发成本较高
4. 小程序方案
使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面。
小程序运行环节分为渲染层和逻辑层，其中ttml模板和ttss样式工作在渲染层，js脚本工作在逻辑层。
优点：
- 开发成本低
- CSS全集，一致性好
缺点：
- 性能较好
