小程序优化性能关键点
1.提高加载性能
2.提高渲染性能
提高加载性能
三个点的白屏阶段->下载代码的阶段->业务代码注入和渲染的阶段,业务代码中异步请求数据(加载中)
总的来说,小程序呈现到用户面前,经历两个阶段: 运行环境的加载->下载代码包.
运行环境的预加载
微信会在用户打开小程序之前就已经准备好环境,用户点击小程序入口后,直接下载小程序的代码包即可.
下载代码包启动小程序
运行环境分为,逻辑层(AppService)和视图层(webview),逻辑层是执行js的地方,视图层是渲染页面的地方.当小程序的代码包下载完毕后,业务代码分别注入逻辑层和渲染层.
提升加载性能,主要是控制包的大小.
控制包大小
- 压缩代码,清理无用的代码
- 图片放在cdn
- 采用分包策略
- 分包预加载
- 独立分包
异步请求的优化
- onLoad阶段就可以发起请求,不用等onReady.
- 请求结果放在缓存中,下次复用
- 请求中可以先展示骨架屏
- 先反馈,再请求.比如说,点赞按钮,可以先改变样式,再发起异步请求.
提升渲染性能
- 每调用一次setData,都是逻辑层向渲染层的一次通讯,这个通信是通过走native层,通讯的开销很大.
- 渲染层收到通讯后,还需要重新渲染出来,所以,一次setData带来两次开销: 通信的开销 + webview更新的开销
- 在数据传输时,逻辑层会执行一次JSON.stringfy来去除掉setData数据中不可传输的部分,之后将数据发送给视图层.同时,逻辑层还会将setData所设置的数据字段与data合并,使开发者可以用this.data读取到变更后的数据.
- 减少setDat的数据量
- 合并setData的请求,减少通讯的次数
- 列表的局部更新
- 后台页面的js
所有的页面都拥有自己的webview,但是却共享同一个js运行环境.在h5环境,当我们跳转到其它页面,老页面的js环境会被自动销毁,定时器.但是在小程序中,必须手动清理.
- onPageScroll
pageScroll事件,也是一次通讯,是webview层向js逻辑层的通讯.
