最近了解了一下微信小程序的性能优化，搜集了一些相关的方法，整理出来，和大家共享。
一、控制代码包大小
1. 开启开发者工具中的“上传代码时自动压缩”
2. 及时清理无用代码和资源文件
3. 减少代码包中的资源文件大小和数量
4. 将资源文件放在CDN中
5. 提取公共样式和公共组件
6.代码和图片压缩
二、分包加载
1. 将小程序中不常用的页面放在多个分包内，主包只保留最常用的核心页面。
如启动页和tabBar页面，以及分包都需要用的公共资源脚本。
2. 启动时只加载主包，使用时按需下载分包。
3. 分包预加载——开发者预先配置页面可能会跳转到的分包，框架在进入页面后根据配置进行预加载。
三、运行机制优化
1. 减少立即执行的代码数量
2. 避免高开销和长时间阻塞代码
3. 页面代码都写入页面的生命周期中
4. 做好缓存策略
四、数据管理优化
1. 首屏请求数量尽量少于5个，超过的可以做接口合并，对多次提交的数据可以做合并处理
五、首屏加载优化
1. 提前请求：异步数据请求不需要等待页面渲染完成
2. 利用缓存：利用storage API对异步请求数据进行缓存。二次启动时先利用缓存数据渲染页面，再进行后台静默更新。
3. 避免白屏：先展示页面骨架和基础内容。
4. 及时反馈：即时地对需要用户等待的交互操作给出反馈，避免用户以为小程序无响应。如点赞，先改变按钮样式，再发送异步请求。
六、渲染性能优化
1. 避免不当使用setData
setData是逻辑层向渲染层的通讯，这个通信不是直接给webview，而是通过走了native层
在数据传输时，逻辑层会执行一次JSON.stringify来去除掉setData数据中不可传输的部分，之后将数据发送给视图层。同时，逻辑层还会将setData所设置的数据字段与data合并，使开发者可以用this.data读取到变更后的数据。
（1）使用data在方法间共享数据，data应只包含与页面渲染相关的数据。
（2）只传输页面中发生变化的数据，使用setData的特殊key实现局部更新
（3）DAU年时间爱你内频繁调用setData
（4）对连续的setData调用进行合并
（5）后台页面进行setData，抢占前台页面的渲染资源——页面切入后台的setData调用，延迟到页面重新展示时执行
（6）页面列表：使用懒加载+动态移除非可视区域范围内的内容。
（7）耗时较长的js做到异步
2. 避免不当使用onPsgeScroll
（1）只在必要时监听pageScroll事件
（2）避免在onPageScroll中执行复杂逻辑
（3）避免在onPageScroll中频繁调用setData
（4）避免频繁查询节点信息(SelectQuery)，部分场景建议使用节点布局相交状态监听(IntersetctionObserver)替代
3. 使用自定义组件
4. canvas渲染
（1）分层绘制到不同canvas
（2）不变的部分单独绘制到一个canvas，动态生成的绘制到一个canvas，最后合入一个canvas
5. 获取节点位置，用intersectionObject
建议：
1. 使用真机调试
2. 开发工具在network里看不到图片资源的加载。要看图片懒加载，要设置微信开发工具的代理到127.0.0.1，通过charles抓包看到
3. 改造setData，记录性能优化的提升
this._startTime = new Date().getTime();
let fn = this.setData;
this.setData = (obj = {}, handle = '') => {
let now = new Date().getTime();
// 上报渲染所需要的时间
log(now - this._startTime)
fn.apply(this, [obj, handle]);
};
关注公粽号【CC前端手记】，更多技术干货等你哦~
网友评论