这是我参与「第五届青训营 」伴学笔记创作活动的第9天。
通过今观看直播课程的学习，我将这节课的笔记总结为以下几点内容：
1.跨端技术方案的目标
首先，跨端技术的研发效率高。学习成本低，而且多端一致性高；
其次，跨端技术的用户体验感普遍较好，有较高的稳定性，性能优越；
再者，跨端技术是动态化的，支持动态化下发，能够满足日益增长的业务需求。
2.跨端技术方案对比
| 技术方案 | 视图层 | 逻辑层 | 优点 | 缺点 |
|---|---|---|---|---|
| hybrid方案 | webview | webciew JS thread | 开发成本低、CSS全集、一致性好 | 性能中等 |
| 原生渲染方案 | 原生组件 | JS Engine | 性能好 | CSS子集、一致性一般 |
| 自渲染方案 | Skia | Dart VM | 性能最好、一致性好 | CSS子集、Dart生态一般、开发成本较高 |
| 小程序方案 | webview+原生组件 | JS Engine | 开发成本低、CSS全集、一致性好 | 性能较好 |
3.小程序性能优化的意义
小程序性能优化可以留住更多的用户，提升转化率，并且提升用户体验和满意度，让用户对产品更加信任。
4.小程序性能优化手段
(1)自动性能体验
- 减少包体积
- 合理使用分包、移除无用文件、控制包内静态资源
- 减少同步逻辑
- 优先使用异步API、避免启动时运行过多同步代码
- 更早的展示触屏数据
- 尽早调用关键API请求、接入数据预取、避免非必要的reLaunch
- 合理缓存数据
- 网络数据缓存、API数据缓存
- 图片优化
- 进行合理的压缩
- 更多优化手段
- 占位组件
(2)运行时性能体验
- 合理使用setData
- 减少发送频率
- 合理使用自定义组件
- 合理拆分组件数量
- 合理监听处理事件
- 合理监听处理scroll事件
- 内存优化
- 及时解绑事件监听、及时清理定时器
- 导航栏适配
- 适当开启自定义导航栏
- x分屏适配
- 通过onResize监听显示区域变化
