微信小程序已经成为企业移动端产品的重要载体，但随着功能不断丰富，性能优化变得越来越重要。分享下常见的性能优化技巧，帮助开发者提升小程序的运行效率。
1. 首屏加载优化
首屏加载速度直接影响用户体验，可以通过以下方式优化：
// 使用分包加载
{
"pages": ["pages/index/index"],
"subpackages": [{
"root": "packageA",
"pages": ["pages/detail/detail"]
}]
}
合理使用分包加载
控制首页资源大小
预加载分包内容
2. 数据预加载
提前请求数据可以明显改善用户体验：
// app.js
App({
onLaunch() {
wx.preloadData({
url: 'api/home/data',
success: (res) => {
this.globalData.homeData = res.data
}
})
}
})
3. 图片资源优化
图片往往是影响性能的主要因素：
使用CDN加速图片加载
采用webp格式
实施图片懒加载
合理压缩图片质量
4. setData优化
减少setData的调用频率和数据量：
// 优化前
data.list.forEach((item, index) => {
this.setData({
[`list[${index}].checked`]: true
})
})
// 优化后
const newList = data.list.map(item => ({
...item,
checked: true
}))
this.setData({ list: newList })
5. 避免不当使用onPageScroll
页面滚动事件需要谨慎处理：
// 使用节流处理滚动事件
const throttle = (fn, delay) => {
let timer = null
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args)
timer = null
}, delay)
}
}
}
Page({
onPageScroll: throttle(function(e) {
// 滚动处理逻辑
}, 200)
})
6. 使用createSelectorQuery优化
合理使用节点查询：
const query = wx.createSelectorQuery()
query.select('#target').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res) {
const targetTop = res[0].top
const scrollTop = res[1].scrollTop
})
7. 合理使用组件生命周期
选择合适的生命周期处理业务逻辑：
8. 使用wx:key优化列表渲染
正确使用key提升列表性能：
9. 合理利用缓存
适当使用缓存减少请求：
10. 避免使用不当的定时器
合理管理定时器：
11. 使用IntersectionObserver优化
监听元素可见性：
12. 优化网络请求
合理处理网络请求：
const request = (url, options = {}) => {
return new Promise((resolve, reject) => {
const token = wx.getStorageSync('token')
wx.request({
url,
...options,
header: {
'Authorization': token,
...options.header
},
success: resolve,
fail: reject
})
})
}
欢迎补充。