微信小程序性能优化总结

背景

根据小程序官方提供的性能优化实践视频并结合自己的小程序项目做的总结,如有不足之处还请大佬批评指正

启动流程优化

1. 使用数据预拉取,在小程序加载时通过网络请求提前获取数据从而有效的减少白屏时间

2. 通过分包加载、减少主包体积提升冷启动加载速度,在进入主包页面后根据当前的页面所在去异步加载可能用到的分包,减少进入分包页面时的时间

3. 在onLoad生命周期中去获取页面首次渲染所需的数据，过早的生命周期获取数据时可能会阻塞小程序正常启动的流程，过晚会造成二次渲染时cpu资源浪费并且增加白屏时间。

4. 通过分包加载、减少主包体积提升冷启动加载速度,在进入主包页面后根据当前的页面所在去异步加载可能用到的分包,减少进入分包页面时的时间

5. 使用按需注入,虽然相关代码包仍然在下载，但是仅会加载首次需要用到的组件和代码。

6. 如果首次需要加载的页面太大，用户中低端机比例又太大，打开速度提升不起来可以采用封面页的优化方案，主包只放一个伪页面，在进入伪页面后加载需要真正进入页面的分包。

7. 启动过程中，会经过Parse WXML的过程，如果页面足够复杂，标签嵌套足够深，那么Parse WXML的过程它的耗时就会很长，wxml和wxss它是经过解析后才能完成视图层代码注入的，如果这个过程很长的话，势必会影响冷启动的一个总时间，所以使用wxml标签要克制，能不用容器标签就不用，能少用标签就少用标签

页面渲染和交互优化

1. 小程序使用重渲染机制。WXML节点越少、嵌套层次越浅、渲染效率越高，每个页面中节点要小于1000个，层次要低于30层，每个节点的子节点不能多于60个。

2. 在首次进入主要页面时，数据未返回前页面往往呈现出白屏或者数据异常展示的情况，使用骨架屏+动画的形式去减缓用户焦急等待的情绪,我们自己项目中由于有回流券的交互需求，所以在首次进入后将详情页返回的数据通过storeage缓存起来，等下次进入页面时参数与上次完全一致的情况下直接读取缓存数据提升页面渲染效率，同时异步获取商品详情数据避免缓存数据和接口数据不同步。不要过度使用骨架屏，在加载非主要页面时骨架屏反而会影响小程序快速加载

3. 使用recycle-view组件优化长列表渲染,该组件采用虚拟dom原理仅渲染用户当前视图中可以看到的部分为了避免白屏的情况出现会多渲染两个屏幕的内容，不管列表数据在怎么多，渲染dom节点的数量固定的,优点可参考页面渲染优化第一条优化总结，该组件可以应用于首页、评价、问答的列表中。

4. 使用页面容器page-container优化页面交互体验，如商品详情页中的下单页，当用户打开下单页后可以直接通过左滑手势或者单击物理返回键去关闭下单页而不是直接返回页面

5. 优化重渲染效率，将频繁变化的数据封装在一个个的单独的组件里边，同时去掉一些不必要的数据设置，减少每次setData传递的一个数据量，还可以通过wxs脚本改写组件直接在视图层完成里代码逻辑提升渲染效率。

js逻辑优化

1. 微信小程序视图层和逻辑层是分开的,他们之间通过Native层进行中转完成的,通信会有一定的损耗,所以尽量减少setData的调用次数,对于uniapp+vue3框架来讲就是减少对响应式数据的更改(reactive、refs)。

2. 使用worker开启新线程,将耗时的运算放入worker里，避免影响页面渲染性能，worker也属于异步执行的，worker限制也很多比如:worker线程同时只能存在一个，系统资源紧张时还可能被系统回收,worker与主线程通信只能使用postMessage和onMessage，所以只能在特定场景中使用来减少页面计算和渲染压力，不是提升页面渲染的最好选择。

3. 当小程序切换至后台不在调用setData，可以通过对setData劫持，在进入后台后不在调用setData,当回到小程序后再让setData能正常使用。

4. 对于scroll高频事件要使用节流函数，对于用户的单击时间尤其是高频触发的按钮可以适当的使用节流函数。

5. 在使用引用类型的数据时不要被全局对象，定时器对象引用或间接引用否则会产生内存泄漏问题。

6. 不要多次分开调用setData，尽量要合并调用，不准备渲染的数据不要放在data数据对象中。

7. 不管wx.setStorage、wx.getStorage是不是以async结尾的他们都是同步的，要注意使用时机，最好在Page.onReady周期内使用，这样就不会影响页面渲染速度。

css优化

1. 优化视图动画，如果仅仅实现动画用关键帧动画效率更高比animation动画快10倍，优惠券的动画就可以使用关键帧动画去完成(目前就是)，高频动画可以使用wxs脚本，省去了逻辑层和视图层的通信提升执行效率，缺点是仅支持es5语法，如商品详情左上角跑马灯,倒计时就可以使用wxs完成。

2. 删除无用的样式代码是为了提高wxss样式的命中率在小程序开发里面要尽量使样式代码物尽其用，如果某些样式只在分包里边使用，就不要在主包里面引入，如果只是在某一个子页面里边使用，就不要在全局的app.wxss文件里面去引用它，如果只是在某一个组件里面使用，就只在组件内进行定义就可以了，本质上这就是为了提高wxss样式代码的有效覆盖率，减少公共样式的引入，不仅可以提高wxss样式的命中率，还有助于加快小程序的启动速度。
3. 尽量减少图片的请求次数，压缩图片大小，使用带有CDN加速的网络图片，尽可能使用高压缩比的图片，如webp格式的图片

通过微信开发者工具优化小程序

1. 通过代码依赖分析查看包体积以及包内文件大小，从而做出针对性的优化。

2. 代码质量扫描了解小程序需要针对优化的地方,如主包大小、无依赖文件等。

3. 通过Performance面板可以查看cpu区域的波浪图直观了解cpu的紧张程度，通过natwork区域网络请求的时长，通过Main区域查看有没有红色到三角从而分析那些地方渲染的不均衡，最后通过Summary标签区域查看整体执行的比例情况。

4. 如果感觉卡顿，代码上有看不出问题可以通过JavaScript Profiler面板查看启动过程当中有哪些步骤，它浪费的时间较多，执行的时间较长。

5. 使用小程序助手的性能分析查看启动性能，运行性能和网络性能等标签更清楚的了解小程序优化的大致结果。

6. 上传实时日志，将一些关键错误信息上报上去，第一时间就能了解是哪些地方导致的问题。