这是我参与「第五届青训营 」笔记创作活动的第8天
跨端是什么
PC端、移动端（安卓、iOS）、web端、IoT设备（车载设备、手表）
常见痛点
- 各端功能几乎一致、各端需要单独配置研发人员
- 开发、维护成本高
- 安卓、iOS发版周期长
方案目标
- 研发效率高
学习成本低，多端一致性高 - 用户体验好
稳定性高、性能体验好 - 动态化
支持动态化下发，满足日益增长的业务需求
跨段技术方案介绍
hybrid方案
基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。
移动端可以打开页面，进行展示。Eg：js没有的蓝牙、文件能力，系统把这些能力开放给WebView。
原生渲染方案
使用JS开发，安卓、iOS提供组件，基于原生组件渲染，通过中间层桥接使用原生组件来渲染UI界面。
OEM widgets方案，原生组件渲染效率较WebView高，但能力较WebView有限，只能使用安卓、iOS系统提供的能力。
Eg：React Native。
自渲染方案
利用Skia重新实现渲染管线，不依赖原生组件。
Skia：开源的渲染引擎。
Eg：Flutter，自定义Widgets。
小程序方案
使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面。
| 技术方案 | 视图层 | 逻辑层 | 优点 | 缺点 |
|---|---|---|---|---|
| hybrid方案 | webview | webview JS thread | 开发成本低，css全集，一致性好 | 性能中等 |
| 原生渲染方案 | 原生组件 | JS Engine | 性能好 | css子集，一致性一般 |
| 自渲染方案 | Skia | Dart VM | 性能最好，一致性好 | css子集，Dart生态一般，开发成本较高 |
| 小程序方案 | webview+原生组件 | JS Engine | 开发成本低，css全集，一致性好 | 性能较好 |
基于小程序跨端实践
快速开发一个小程序
- 下载小程序开发者工具
developer.open-douyin.com/docs/resour… - 小程序开发、调试
developer.open-douyin.com/docs/resour… - 小程序上传
小程序性能优化
留住用户，提升转化率，提升用户体验。
性能指标：Loading，FP首屏，LCP最大内容绘制（优化目标）。
