这是我参与「第五届青训营」笔记创作活动的第十九天
启动性能体验
重点在提高下载速度,减少阻塞
减少包体积
- 合理使用分包 -> 把一些冷门页面 或 首屏用不到的数据分到别的包去,这样就缩短了首次加载的时间
- 移除无用文件 -> 随着开发和迭代,可能会遗留下很多无用的文件,我们需要定期的去清理,来减小包大小
- 控制包内静态资源 -> 很多开发者可能会把音频以及图片等静态资源也放在包中,会使包的体积变得很大,建议将这些文件放在CDN上,通过CDN来分发静态资源
减少同步逻辑
- 优先使用异步代码,大量的同步代码会阻塞代码的运行
- 避免启动时运行过多同步代码
更早的展示首屏数据
- 通常来说,我们可能会在onload中执行对数据的请求,但我们 -> 尽早调用关键API和请求 或数据预取的方式 来提前这些步骤
合理缓存数据
- 使用缓存代替部分非必要的请求
图片优化
- 使用压缩率更高的一些格式 比如 webp
- 或者根据我们的业务特点来选择图片的尺寸 比如说某个应用场景下320的尺寸就够了,那我们就没必要使用1080尺寸的图片
- 使用CDN并开启缓存
更多优化手段
有时候优化过后,仍会存在较长的白屏时间,我们可以通过以下措施来优化体验
- 骨架屏
- 占位组件
运行时性能体验
重点在SetData 和 内存的优化
合理使用setData
小程序的逻辑层和数据层是分离的,它们之间的通信,是天然地存在着一些成本|开销的
- 减少发送频率 -> 合并一些setData
- 减少Data的数据大小 -> 只发有用的数据
- 场景上进行优化 -> 动画不使用setData, 建议使用官方提供的animation这样的能力
合理使用自定义组件
- 合理的拆分组件数量 -> 比如说一个页面里的内容有所更新,不分组件的话,会以整个page来执行Diff算法,如果分了组件,可以以该组件来执行Diff算法
- 只注册当前使用的组件 -> 按需注册!
合理监听处理事件
- 合理监听处理Scroll事件 -> Scroll事件触发频率很高,存在较高的通信成本 (在视图层监测,然后发到逻辑层),所以一定要在场景确实需要的时候才做,且做一定的节流
内存优化
- 及时解绑事件监听
- 及时清理定时器
导航栏适配
小程序是有提供默认的导航栏的
- 适当开启自定义导航栏
- 关键信息避开状态栏和胶囊按钮
X分屏适配
抖音小程序下的一个特殊场景
- 通过onResize监听区域变化,来做对应的适配