这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
一、跨端是什么
1.跨端背景
随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC端(Windows、Mac),移动端（安卓、iOS)、web端、IoT设备（车载设备、手表）等
常见的痛点：
- 各端功能几乎一致，各端需要单独配置研发人员
- 开发、维护成本高
- 安卓、iOS发版周期长
2.跨端技术方案目标
-
研发效率高
- 学习成本低
- 多端一致性高
-
用户体验好
- 稳定性高
- 性能体验好
-
动态化
- 支持动态化下发，满足日益增长的业务需求
二、跨端技术方案介绍
1.Hybrid方案
基于VebView渲染，通过JS Bridge把一部分系统能力开放给JS调用
2.原生渲染方案
使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面
3.React Native
React Native是一个由Facebook于20l5年9月发布的一款开源的JavaScript框架，它可以让开发者使用JavaScript和React来开发跨平台的移动应用
4.自渲染方案
利用Ska重新实现渲染管线，不依赖原生组件
5.Flutter
Flutter是Google在2018年世界移动大会公布的开源应用开发框架，仅通过套代码库，就能构建精美的、原生平台编译的多平台应用。
6.小程序方案
使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面。
7.跨端方案对比
| 技术方案 | 视图层 | 逻辑层 | 优点 | 缺点 |
|---|---|---|---|---|
| hybrid方案 | webiew | webview JS thread | 开发成本低、CSS全集、一致性好 | 性能中等 |
| 原生渲染方案 | 原生组件 | JS Engine | 性能好 | .CSS子集、一致性一般 |
| 自渲染方案 | Skia | Dart VM | 性能最好、一致性好 | CSS子集、Dart生态一般、开发成本较高 |
| 小程序方案 | webview+原生组件 | JS Engine | 开发成本低、CSS全集、一致性好 | 性能较好 |
三、基于小程序跨端实践
1.快速开发一个小程序
- 下载小程序开发者工具
- 小程序开发、调试
- 小程序上传
2.小程序性能优化
- 留住用户
- 提升转化率
- 提升用户体验
四、技术展望
随着端越来越多，跨端的需求会越来越强烈，跨端技术方案也会不断迭代，核心目标仍然是「write once,run anywhere.」，未来自渲染可能会出现更多机会。
五、参考文档
字节小程序开发者平台 - Creating future with excellent developers (bytedance.com)
