这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
前言
课程重点：
- 跨端技术概述
- 小程序详解
- 小程序实战
- 小程序性能优化
跨端是什么
在业务的发展过程中，会不断地产生出更多的业务场景，比如PC端，移动端、Web端、LoT设备的等。而每种业务场景又分别对应着不同的开发技术和方案。但是对于同一业务需求，各端的功能基本都是一样的，但却因为技术的具体实现不同，需要配置单独的研发人员，造成开发、维护成本高的问题。为了解决这些问题，跨端技术应运而生。 跨端技术的目标
- 提高研发效率
- 学习成本低
- 多端一致性高
- 用户体验好
- 稳定性搞
- 性能体验好
- 动态化
- 支持动态化下发、满足日益增长的业务需求
跨端技术方案
1.Hybrid
基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用
2.原生渲染方案 - React Native
使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面
3.自渲染方案 - Flutter
利用Skia重新实现渲染管道，不依赖原生组件
4.小程序方案
使用小程序DSL + JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面
性能优化
1.性能优化目的
- 留住用户
- 提升转化率
- 提升用户体验
2.小程序的性能指标
- Loading View
- 首次绘制
- 最大内容绘制
- 加载完成
3.优化手段
（1）较少包体积
- 合理使用分包
- 使用分包加载是优化小程序启动耗时效果最明显的手段。
- 移除无用文件
- 控制包内静态资源 （2）减少同步逻辑
- 优先使用异步API
- 在小程序初始化代码和启动相关的几个生命周期中，应避免执行复杂的计算逻辑 （3）更早的展示首屏数据
- 尽早调用关键API和请求
- 首屏绘制可能会依赖API数据和网络请求，尽早的调用相关网络请求，能提前数据准备时间
- 接入数据预读取
- 避免非必要的reLaunch （4）合理缓存数据
- 网络数据缓存
- API数据缓存 （5）图片优化
- 选择合适的图片格式
- 进行合理的压缩
- 使用CDN并开启缓存 （6）其他优化手段
- 骨架框
- 占位组件
4.运行时性能体验
- 合理使用setData
- 合理使用自定义组件
- 合理监听处理事件
- 内存优化
- 导航栏适配
- X分屏适配
总结
本节课主要对跨端技术和小程序开发相关知识进行了相应的介绍
