这是我参与[第五届青训营]笔记创作活动的第九天
本课堂重点内容：
- 何为跨端
- 跨端技术方案介绍
- 基于小程序的跨端实践
详细知识点介绍：
跨端背景：
- 随着业务发展，产生了越来越多的业务场景，同时伴随着技术的发展，产生了越来越多的端，PC端，移动端等。
- 痛点：
- 各端功能几乎一致，各端需要单独配置研发人员
- 开发、维护成本高
- 安卓、IOS 发版周期长
跨端技术方案目标：
- 研发效率高：学习成本低，多端一致性高
- 用户体验好：稳定性高，性能体验好
- 动态化：支持动态化下发，满足日益增长的业务需求
跨端技术方案介绍：
1. Hybrid 方案：
基于 WebView 渲染，通过 JS Bridge 把一部分系统能力开放给 JS 调用
2. 原生渲染方案：
使用 JS 开发，通过中间层桥接后使用原生组件来渲染 UI 界面
3. 自渲染方案：
利用 Skia 重新实现渲染管线，不依赖原生组件
4. 小程序方案：
使用小程序 DSL + JS 开发，通过中间层桥接后调用原生能力，使用 webview 来渲染 UI 界面
跨端技术方案对比：
| 技术方案 | 视图层 | 逻辑层 | 优点 | 缺点 |
|---|---|---|---|---|
| hybrid 方案 | webview | webview JS thread | 1.开发成本低 2.CSS全集 3.一致性好 | 性能中等 |
| 原生渲染方案 | 原生组件 | JS Engine | 性能好 | 1. CSS子集 2.一致性一般 |
| 自渲染方案 | Skia | Dart VM | 1.性能最好 2.一致性好 | 1.CSS 子集 2.Dart 生态一般 3.开发成本较高 |
| 小程序方案 | webview + 原生组件 | JS Engine | 1.开发成本低 2.CSS全集 3.一致性好 | 性能较好 |
小程序性能优化
小程序性能是指小程序在字节系APP中加载和呈现的速度，以及用户交互的响应速度。小程序性能优化有三个意义：提升用户体验、提升转化率、留住用户群体。
小程序性能的优化手段：
个人课后总结：
随着端越来越多，跨端的需求会越来越强烈，跨端技术方案也会不断迭代，核心目标仍然是【write once,run anywhere】,未来自渲染可能会出现更多机会。
