先要进行性能优化首先需要了解小程序的实现原理：
参考文档：
- 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 使用自定义组件
- 对于一些独立的模块我们尽可能抽离出来，因为自定义组件的更新并不会影响页面上其他元素的更新
