这是我参与「第五届青训营 」伴学笔记创作活动的第21天，学习的是关于跨端技术的相关知识。
跨端是什么？
跨端背景
- 业务发展 → 业务场景增加
- 技术发展 → 端口增加 → 痛点出现 → 跨端诉求
端口：PC端（Windows、Mac）、移动端（安卓、iOS）、web端、IoT设备（手表、车载设备）
痛点: 各端功能雷同，但不同的端需要不同的研发人员； 开发、维护成本高； 安卓、iOS发版周期长
跨端技术方案目标
- 研发效率高： 学习成本低、多端一致性高
- 用户体验好：稳定性高、性能体验好
- 动态化：支持动态化下发，满足日益增长的业务需求
跨端技术方案介绍
Hybrid方案
基于webview渲染，通过JS bridge把一部分系统能力开放给JS调用。
原生渲染方案
使用JS开发，最后用原生组件渲染UI界面.
react native： 支持开发者使用JS和react来开发跨平台的移动应用。
自渲染方案
利用skia，不依赖原生组件.
Flutter： 用一套代码库构建精美的、原生平台编译的多平台应用。
小程序方案
使用小程序DSL+JS开发，利用webview渲染UI界面.
字节小程序： 全新的连接用户与服务的方式，在宿主（抖音、头条等app）内被便捷地获取和传播，使用体验出色。
跨端技术方案对比
| 技术方案 | 视图层 | 逻辑层 | 优点 | 缺点 |
|---|---|---|---|---|
| Hybrid方案 | webview | webview JS thread | 开发成本低；CSS全集；一致性好 | 性能中等 |
| 原生渲染方案 | 原生组件 | JS Engine | 性能好 | CSS子集；一致性一般 |
| 自渲染方案 | skia | Dart VM | 性能最好；一致性好 | CSS子集；Dart生态一般；开发成本高 |
| 小程序方案 | webview+原生组件 | JS Engine | 开发成本低；CSS全集；一致性好 | 性能较好 |
基于小程序跨端实践
快速开发一个小程序
1、下载开发工具
2、开发与调试
- 编辑区：代码开发
- 模拟器：展示相应内容
- 调试工具：系统根据问题提供合适的调试工具
3、上传
小程序性能优化
优化意义
- 留住用户
- 提升转化率
- 提升用户体验
优化步骤
- 了解性能指标
- 平台指标看板
优化手段
- 减少不必要的加载项，及时更新并清理垃圾文件、缓存访问频次高的结果等
- 优化setData、内存、自定义组件，提升用户体验
性能评分工具
检测存在的问题
性能分析工具
对具体的问题进行相应的优化
