微信小程序性能优化

0 阅读3分钟

工具推荐:

  • 体验评分:对每个页面从性能、体验、最佳实践方面进行评分,官网文档:体验评分
  • 代码静态依赖分析:分析代码包的文件构成和依赖关系,官方文档:代码静态依赖分析

性能优化方式:

微信开发者工具官方文档:性能优化方式

一、启动性能

启动性能

代码包体积优化

代码包体积优化

  • 分包加载:独立分包、分包预下载、分包异步化
  • 避免非必要的全局自定义组件和插件
  • 控制代码包内的资源文件:大文件尽量部署到CDN
  • 及时清理无用代码和资源

代码注入优化

代码注入优化

  • 使用按需注入、用时注入
  • 启动过程中减少同步API调用:App.onLaunch, App.onShow, Page.onLoad, Page.onShow
  • 避免启动过程进行复杂运算

首屏渲染优化

首屏渲染优化

  • 使用按需注入和用时注入:减少需要初始化的组件数量
  • 启用初始渲染缓存:自基础库版本 2.11.1 起,小程序支持启用初始渲染缓存
  • 避免引用未使用的自定义组件:当组件不被使用时,应及时从 usingComponents 中移除。
  • 精简首屏数据:与视图层渲染无关的数据应尽量不要放在 data 中,避免影响页面渲染时间。
  • 提前首屏数据请求:数据预拉取、周期性更新
  • 缓存请求数据
  • 骨架屏

其他启动性能优化建议

其他启动性能优化建议

  • 合理规划版本发布:提前做好版本规划,控制版本发布的频率

二、运行时性能

运行时性能

合理使用setData

合理使用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 模式

内存优化

内存优化

  • 合理使用分包加载

  • 使用按需注入和用时注入

  • 内存分析

  • 处理内存告警

  • 小程序常见的内存泄露问题

    • 小程序长期持有页面实例,导致页面实例和引用的组件无法正常销毁
    • 事件监听未及时解绑
    • 未清理的定时器

性能数据:

性能数据

  • 获取性能数据

  • 影响启动耗时的因素

  • 启动数据

    • 「启动总耗时」与 「下载耗时」、「js 注入耗时」、「初次渲染耗时」之和差异很大
    • 各阶段耗时平均值的下降不一定反应在总耗时的下降
    • 小程序版本版本发布都会导致一段时间内启动耗时的上涨

性能诊断工具:

官方文档:性能诊断工具

评测结果名词解释:评测结果名词解释