微信小程序性能优化

一、工具推荐体验评分对每个页面从性能、体验、最佳实践方面进行评分官网文档体验评分代码静态依赖分析分析代码包的文件构成和依赖关系官方文档代码静态依赖分析二、性能优化方式微信开发者工具官方文档性能优化一启动性能启动性能代码包体积优化代码包体积优化分包加载独立分包、分包预下载、分包异步化避免非必要的全局自定义组件和插件控制代码包内的资源文件大文件尽量部署到CDN及时清理无用代码和资源代码注入优化代码注入优化使用按需注入、用时注入启动过程中减少同步API调用App.onLaunch, App.onShow, Page.onLoad, Page.onShow避免启动过程进行复杂运算首屏渲染优化首屏渲染优化使用按需注入和用时注入减少需要初始化的组件数量启用初始渲染缓存自基础库版本 2.11.1 起小程序支持启用初始渲染缓存避免引用未使用的自定义组件当组件不被使用时应及时从 usingComponents 中移除。精简首屏数据与视图层渲染无关的数据应尽量不要放在 data 中避免影响页面渲染时间。提前首屏数据请求数据预拉取、周期性更新缓存请求数据骨架屏其他启动性能优化建议其他启动性能优化建议合理规划版本发布提前做好版本规划控制版本发布的频率二运行时性能运行时性能合理使用setData合理使用setDatadata 应只包括渲染相关的数据控制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 注入耗时」、「初次渲染耗时」之和差异很大各阶段耗时平均值的下降不一定反应在总耗时的下降小程序版本版本发布都会导致一段时间内启动耗时的上涨四、性能诊断工具官方文档性能诊断工具评测结果名词解释评测结果名词解释