这是我参与「第五届青训营 」笔记创作活动的第12天
本堂课重点内容
1. 跨端是什么，给大家介绍跨端产生的背景及解决的问题 2. 跨端技术方案介绍，给大家介绍目前主流的跨端技术方案（hybrid 方案/原生渲染方案/自渲染方案/小程序方案）以及对比 3. 基于小程序跨端实践，带大家了解如何开发一个小程序以及优化小程序 4. 总结与展望
重点知识点介绍
1. 跨端解决了什么问题？
业务发展过程中会产生越来越多的业务场景，也会涉及到更多端的应用。各端功能基本一致，但却需要单独配置研发人员；开发维护成本高；安卓IOS的发版周期长；跨端可以解决以上问题
2. 常见的跨端技术方案有哪些？各方案的技术原理是什么？他们之间有什么区别？
方案：
Hybrid方案
> 原理：基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用(拦截URL并用JS方法load)
原生渲染方案
> 使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面
自渲染方案
> 利用Skia重新实现渲染管线，不依赖原生组件，例如Flutter是依据skia开发的高性能跨平台UI框架
小程序方案
> 使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面
| 技术方案 | 视图层 | 逻辑层 | 优点 | 缺点 |
|---|---|---|---|---|
| hybrid 方案 | webview | webview JS thread | 开发成本低，css 全集，一致性好 | 性能中等 |
| 原生渲染方案 | 原生组件 | JS Engine | 性能好 | css 子集，一致性一般 |
| 自渲染方案 | Skia | Dart VM | 性能最好，一致性好 | css 子集，Dart 生态一般，开发成本较高 |
| 小程序方案 | webview + 原生组件 | JS Engine | 开发成本低，css 全集，一致性好 | 性能较好 |
3. 跨端技术方案中有哪几个核心部分？
- 获取数据 - 状态管理 - 页面渲染
课后个人总结
今天老师介绍了有关跨端的知识，未来跨端的需求将越来越强烈。
write once, run anywhere
