微信小程序性能优化

引言

小程序性能直接影响用户体验和留存。逻辑层与视图层通过数据通信，setData 是主要的性能瓶颈之一；图片加载、首包大小、节点数量等也会影响流畅度。常见优化方向包括：减少 setData 频率与数据量、图片懒加载与压缩、分包加载、避免频繁创建/销毁节点等。

本文介绍常用性能优化手段。建议使用开发者工具的「性能」面板分析具体页面的 setData 耗时、渲染耗时，针对性优化。

setData 优化

setData 会触发逻辑层到视图层的数据传输和视图 diff 更新。单次传递的数据越大、调用越频繁，性能开销越大。应只传递变化的数据，使用路径语法更新嵌套字段；合并同一帧内的多次 setData 为一次；避免在循环、滚动回调中频繁调用。

• 只传递变化的数据，避免整对象替换
• 合并多次 setData 为一次
• 避免在循环中调用 setData

// 不推荐
this.setData({ 'list[0].name': 'a' });
this.setData({ 'list[1].name': 'b' });

// 推荐
this.setData({
  'list[0].name': 'a',
  'list[1].name': 'b'
});

图片优化

• 使用 lazy-load 懒加载
• 合理设置 mode，避免大图拉伸
• 图片压缩与 CDN

分包与按需加载

将非首屏页面放入分包，减少主包体积，加快首屏加载。详见分包加载专题。

总结

性能优化需结合具体场景，使用开发者工具的「性能」面板分析瓶颈。setData 与图片是常见优化重点。建议在开发阶段就注意性能习惯，避免后期大规模重构。