微信小程序性能优化与内存管理
一、启动加载优化（首屏秒开关键）
1、代码包瘦身
// 分包配置 app.json
{"subPackages": [{"root": "pages/sub","pages": ["index"]}],"preloadRule": {"pages/main/index": { "network": "all", "packages": ["sub"] }}
}
效果：主包控制在2MB内，总包≤20MB
工具：使用webpack-bundle-analyzer分析依赖
2、静态资源CDN化
<!-- 图片/视频等静态资源 -->
<image src="https://cdn.example.com/image.jpg" mode="widthFix" />
3、按需注入与懒注入
{"lazyCodeLoading": "requiredComponents","componentFramework": "explicit"
}
二、渲染性能优化
1、长列表性能
<!-- 使用官方recycle-view组件 -->
<recycle-view batch="{{batchSetRecycleData}}"></recycle-view>
替代方案：wx.createSelectorQuery()手动计算可视区域
2、减少节点嵌套
<!-- 错误示例：过度嵌套 -->
<view><view><view><text>多层嵌套</text></view></view></view>
<!-- 正确示例：扁平化 -->
<view class="container"><text>直接子节点</text>
</view>
3、避免频繁setData
// 错误做法：高频更新
setInterval(() => {this.setData({ timer: Date.now() }) // 每秒60次
}, 16)// 正确做法：合并更新
this.setData({a: 1,b: 2 // 一次通信完成
})
三、内存管理核心策略
1、全局数据管理
// 使用getApp()共享数据
App({globalData: {cache: new Map() // 替代频繁setData}
})// 页面中访问
getApp().globalData.cache.set('key', value)
2、图片内存控制
// 监听页面卸载释放资源
Page({onUnload() {this.data.images.forEach(src => {wx.getImageInfo({ src }).then(res => {res.path = '' // 释放内存})})}
})
事件监听清理
Page({onLoad() {this._onResize = () => console.log('resize')wx.onWindowResize(this._onResize)},onUnload() {wx.offWindowResize(this._onResize) // 必须清理！}
})
四、缓存策略
| 缓存类型 | API | 适用场景 | 生命周期 |
|---|---|---|---|
| 本地缓存 | wx.setStorageSync | 用户偏好设置 | 手动清除 |
| 内存缓存 | globalData | 页面间共享数据 | 小程序关闭 |
| 临时文件 | wx.downloadFile | 网络图片/视频 | 主动清理 |
| 数据库缓存 | wx.cloud.database | 结构化数据 | 长期保留 |
五、高级优化技巧
1、 Worker线程处理计算
// worker.js
self.onMessage = (msg) => {const result = heavyCompute(msg.data)self.postMessage(result)
}// 主线程
const worker = wx.createWorker('workers/worker.js')
worker.postMessage({ data: largeArray })
2、WXS脚本优化渲染
<!-- 在WXS中处理复杂计算 -->
<wxs module="utils">function formatPrice(price) {return '¥' + price.toFixed(2)}module.exports = { formatPrice }
</wxs>
<view>{{utils.formatPrice(item.price)}}</view>
3、自定义组件优化
Component({options: {pureDataPattern: /^_/ // 以下划线开头的data不参与渲染},data: {_internalState: 0 // 不会触发UI更新}
})
六、性能监控方案
1、 内置指标
wx.getPerformance().mark('customMark')
const metrics = wx.getPerformanceEntries()
2、自定义上报
const start = Date.now()
wx.request({url: 'api.example.com',success() {const cost = Date.now() - startwx.reportAnalytics('api_perf', { api: 'list', cost })}
})
3、内存警告处理
wx.onMemoryWarning(() => {clearCache()wx.showToast({ title: '系统内存不足' })
})
七、避坑指南
1、setData的红线
单次设置数据≤256KB
避免在滚动/动画中高频调用
2、图片加载规范
尺寸不超过实际显示2倍
优先使用WebP格式（体积小30%）
3、页面栈管理
// 避免页面栈过深
if (getCurrentPages().length >= 8) {wx.redirectTo() // 用重定向代替navigateTo
}