微信小程序的性能优化

先要进行性能优化首先需要了解小程序的实现原理：
参考文档：

• https://github.com/febobo/web-interview/issues/289
• https://developers.weixin.qq.com/community/develop/article/doc/0008a4c4f28f30fe3eb863b2750813
• https://juejin.cn/post/6976805521407868958#heading-5
• https://juejin.cn/post/6844903805675388942
• https://juejin.cn/post/6844903999863259144#heading-1

启动小程序的步骤：

• 从CDN服务器上下载小程序代码包（代码包不是小程序的源代码，而是编译、压缩打包之后的代码包）
• 加载此代码包
• 初始化首屏

由此，我们从加载、渲染两个方面来进行优化

1. 加载

1.1 进行分包处理

• 微信小程序要求每个包大小不能超过2M；

1.2 控制包的大小

• 减少资源包中的图片等资源的数量和大小（icon可以放在本地，图片尽量放在服务器上，然后http引入）；
• 提取公共组件、方法、样式，减少冗余代码；
• 及时清理无用代码和资源文件；
• 第三方插件包按需引入；

2. 渲染

2.1 对于数据的请求（首屏体验（预请求，利用缓存））

• 尽量提早请求数据，不要等页面ready后再异步请求数据

  
  数据的请求时机
• 尽量减少不必要的https请求，可使用 getStorageSync() 及 setStorageSync() 方法将数据存储在本地
• 可以在前置页面将一些有用的字段带到当前页，进行首次渲染（列表页的某些数据--> 详情页），没有数据的模块可以进行骨架屏的占位

2.2 规范setData操作

image.png

• 减少setData次数
  a) 仅传输视图层使用到的数据，JS环境用到的数据存放到data对象外;
  b) 合理利用局部更新。setData支持使用数据路径的方式对对象的局部字段进行更新。

this.setData({
       [`dotList[${tarIndex}].dotShow`]: true,
       [`dotList[${tarIndex}].dotNum`]: +res.data
});

• 降低setData执行频率：
  c) 将多个setData调用合并执行，减少线程间通信频次;
  d) 当需要在频繁触发的用户事件（如PageScroll、Resize事件）中调用setData，合理的利用函数防抖（debounce）和函数节流（throttle）可以减少setData执行次数。

2.3 使用自定义组件

• 对于一些独立的模块我们尽可能抽离出来，因为自定义组件的更新并不会影响页面上其他元素的更新