携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

---

前言

性能优化是小程序开发中极为重要的一环，页面响应慢、操作卡顿、启动速度时间长，都很影响用户体验，会造成小程序用户流失。小程序性能优化需要从多个方面考虑，本文都会介绍一下。

体积优化

小程序和h5一样，打开的时候会进行资源加载，过大的体积会影响打开速度。

代码瘦身

1. 重复代码/无效代码（tree shaking）
2. 重要逻辑移到后端
3. 复用代码
4. moment等体积大的库替换

减少静态资源文件 （cdn）

• 把静态资源可放cdn上，如图片，附件等。

分包加载

• 项目可分为主页面与子页面，非首屏打开的页面都可以放到子页面，当跳转到子页面再进行加载。

部分页面h5化

• 使用jssdk 或 postMessage。

图片层面优化

弱网情况下加载大图，显示较慢，影响用户体验。

• 图片WebP格式优化（体积小）
• 图片裁剪&降质
• 图片懒加载，雪碧图优化（合并http请求）
• 降级加载大图资源（先显示模糊，然后点击图片再显示高清图）

代码层面优化

1. setData合并及降频
2. 减少节点数量 （过多的节点数量会造成卡顿）
3. setData之前diff、去掉不必要的事件绑定、去掉节点绑定、适当的组件颗粒度、事件总线代替组件数据绑定（逻辑层处理比线程通信更合理）、wx.onMemoryWarning内存告警（收集并优化）
4. onHide时候回收定时器
5. 避免频发事件中的重度内存操作（合理使用截流、防抖）
6. 长列表优化

首屏与体验优化

1. 首屏时长优化
2. 数据预拉取
3. 分屏渲染
4. 跳转时预拉取
5. 分包预下载
6. 骨架屏（页面加载前显示骨架屏，可减少用户的等待焦虑）

接口层面优化

1. 非关键渲染数据延迟请求
2. 接口聚合，请求合并（小程序最多可同时请求10个接口，可适当进行数据合并，节省资源）

结语

小程序性能优化与h5性能优化相似，只不过多了一些分包加载的功能，还有小程序的架构有一些特殊，合理使用setData非常重要。