工具推荐:
性能优化方式:
微信开发者工具官方文档:性能优化方式
一、启动性能
代码包体积优化
- 分包加载:独立分包、分包预下载、分包异步化
- 避免非必要的全局自定义组件和插件
- 控制代码包内的资源文件:大文件尽量部署到CDN
- 及时清理无用代码和资源
代码注入优化
- 使用按需注入、用时注入
- 启动过程中减少同步API调用:App.onLaunch, App.onShow, Page.onLoad, Page.onShow
- 避免启动过程进行复杂运算
首屏渲染优化
- 使用按需注入和用时注入:减少需要初始化的组件数量
- 启用初始渲染缓存:自基础库版本 2.11.1 起,小程序支持启用初始渲染缓存
- 避免引用未使用的自定义组件:当组件不被使用时,应及时从 usingComponents 中移除。
- 精简首屏数据:与视图层渲染无关的数据应尽量不要放在 data 中,避免影响页面渲染时间。
- 提前首屏数据请求:数据预拉取、周期性更新
- 缓存请求数据
- 骨架屏
其他启动性能优化建议
- 合理规划版本发布:提前做好版本规划,控制版本发布的频率
二、运行时性能
合理使用setData
- data 应只包括渲染相关的数据
- 控制setData的频率
- 选择合适的setData范围
- setData应只传发生变化的数据
- 控制后台态页面的setData
可以通过组件的 setUpdatePerformanceListener 接口获取更新性能统计信息,来分析产生性能瓶颈的组件。
渲染性能优化
-
适当监听页面或组件的scroll事件
-
使用 IntersectionObserver 监听元素曝光
-
控制WXML节点数量和层级
- ✅ 建议一个页面 WXML 节点数量应少于 1000 个,节点树深度少于 30 层,子节点数不大于 60 个。
-
控制在Page构造时传入的自定义数据量
- ✅ 对于比较复杂的数据对象,建议在 Page onLoad 或 Component created 时手动赋值到 this 上,而不是通过 Page 构造时的参数传入。
页面切换优化
- 避免在 onHide/onUnload 执行耗时操作
- 首屏渲染优化
- 提前发起数据请求
- 控制预加载下个页面的时机
资源加载优化
- 控制图片资源的大小
- 避免滥用 image 组件的 widthFix/heightFix 模式
内存优化
-
合理使用分包加载
-
使用按需注入和用时注入
-
内存分析
-
处理内存告警
-
小程序常见的内存泄露问题
- 小程序长期持有页面实例,导致页面实例和引用的组件无法正常销毁
- 事件监听未及时解绑
- 未清理的定时器
性能数据:
-
获取性能数据
- 通过We分析
- 通过 wx.getPerformance 在小程序内获取
- 通过服务端接口getPerformanceData获取
-
影响启动耗时的因素
-
启动数据
- 「启动总耗时」与 「下载耗时」、「js 注入耗时」、「初次渲染耗时」之和差异很大
- 各阶段耗时平均值的下降不一定反应在总耗时的下降
- 小程序版本版本发布都会导致一段时间内启动耗时的上涨
性能诊断工具:
官方文档:性能诊断工具
评测结果名词解释:评测结果名词解释