一 说说提⾼微信⼩程序的应⽤速度的⼿段有哪些?

1.1 是什么

⼩程序启动会常常遇到如下图场景:

这是因为,⼩程序⾸次启动前,微信会在⼩程序启动前为⼩程序准备好通⽤的运⾏环境,如运⾏中的线程和⼀些基础库的初始化

然后才开始进⼊启动状态,展⽰⼀个固定的启动界⾯,界⾯内包含⼩程序的图标、名称和加载提⽰图标。此时,微信会在背后完成⼏项⼯作:

  • 下载⼩程序代码包
  • 加载⼩程序代码包
  • 初始化⼩程序⾸⻚

下载到的⼩程序代码包不是⼩程序的源代码,⽽是编译、压缩、打包之后的代码包

整体流程如下图:

1.2 ⼿段

围绕上图⼩程序的启动流程, 我们可以从加载、渲染两个纬度进⾏切⼊:

1.2.1 加载

提升体验最直接的⽅法是控制⼩程序包的⼤⼩,常⻅⼿段有如下:

  • 代码包的体积压缩可以通过勾选开发者⼯具中“上传代码时,压缩代码”选项
  • 及时清理⽆⽤的代码和资源⽂件
  • 减少资源包中的图⽚等资源的数量和⼤⼩(理论上除了⼩icon,其他图⽚资源从⽹络下载),图⽚资源压缩率有限

并且可以采取分包加载的操作,将⽤⼾访问率⾼的⻚⾯放在主包⾥,将访问率低的⻚⾯放⼊⼦包⾥,按需加载

当⽤⼾点击到⼦包的⽬录时,还是有⼀个代码包下载的过程,这会感觉到明显的卡顿,所以⼦包也不建议拆的太⼤,当然我们可以采⽤⼦包预加载技术,并不需要等到⽤⼾点击到⼦包⻚⾯后在下载⼦包

1.2.2 渲染

关于微信⼩程序⾸屏渲染优化的⼿段如下:

  • 请求可以在⻚⾯onLoad就加载,不需要等⻚⾯ready后在异步请求数据
  • 尽量减少不必要的https请求,可使⽤ getStorageSync() 及 setStorageSync() ⽅法将数据存储在本地
  • 可以在前置⻚⾯将⼀些有⽤的字段带到当前⻚,进⾏⾸次渲染(列表⻚的某些数据--> 详情⻚),没有数据的模块可以进⾏⻣架屏的占位

在微信⼩程序中,提⾼⻚⾯的多次渲染效率主要在于正确使⽤ setData :

  • 不要过于频繁调⽤setData,应考虑将多次setData合并成⼀次setData调⽤
  • 数据通信的性能与数据量正相关,因⽽如果有⼀些数据字段不在界⾯中展⽰且数据结构⽐较复杂或包含⻓字符串,则不应使⽤ setData 来设置这些数据
  • 与界⾯渲染⽆关的数据最好不要设置在data中,可以考虑设置在page对象的其他字段下

除此之外,对于⼀些独⽴的模块我们尽可能抽离出来,这是因为⾃定义组件的更新并不会影响⻚⾯上其他元素的更新

各个组件也将具有各⾃独⽴的逻辑空间。每个组件都分别拥有⾃⼰的独⽴的数据、 setData 调⽤

1.3 总结

⼩程序启动加载性能:

  • 控制代码包的⼤⼩
  • 分包加载
  • ⾸屏体验(预请求,利⽤缓存,避免⽩屏,及时反馈

⼩程序渲染性能:

  • 避免不当的使⽤setData
  • 使⽤⾃定义组件