一、开发者视角(代码层面)
1. 内存泄漏

原因:未释放无用资源(如未移除事件监听、未销毁定时器、全局变量滥用)。
案例:页面跳转时未清除 `setInterval`,导致多个定时器叠加。
解决:使用微信小程序提供的 `onUnload` 生命周期函数清理资源。
2. 大资源未优化
图片/视频:未压缩的高分辨率文件直接加载。
数据量过大:单次 `setData` 传输超 1MB 数据或频繁更新(如实时滚动日志)。
解决:压缩图片为 WebP 格式,分页加载数据,使用虚拟列表优化长列表。
3. 第三方库滥用
原因:引入未压缩的 npm 包(如某些图表库体积过大)。
解决:使用分包加载,或替换轻量级库(如用 `echarts-for-weixin` 替代完整版 ECharts)。
4. 复杂 DOM 结构
表现:嵌套过深的 `view` 或 `scroll-view`,节点数超 1000。
解决:简化布局,使用 `virtual-list` 组件渲染长列表。
二、用户视角(运行环境)
1. 设备性能不足
低端机型:如 2GB 内存的旧手机,系统分配给微信的总内存不足。
解决:提示用户关闭后台应用,或提供「极简模式」功能。
2. 微信内存限制
微信策略:单小程序进程内存超 1GB 可能被强制回收(iOS/Android 策略不同)。
表现:Android 设备提示更频繁,iOS 可能直接白屏。
解决:通过 `wx.onMemoryWarning` 监听内存警告,主动释放非关键资源。
3. 缓存堆积
长期未清理:小程序本地缓存(`wx.setStorage`)积累过多。
解决:代码中设置缓存过期时间,或提供「一键清理」按钮。
三、调试工具
1. Chrome DevTools
通过微信开发者工具的「Memory」面板抓取内存快照,查找未释放对象。
2. 性能面板
监控 `setData` 频率和数据量,优化数据传输(如用 `data-` 前缀减少字段)。
典型场景案例
图片列表页崩溃:加载 100 张 2MB 的未压缩图片,导致内存峰值超过 500MB。
优化:使用 CDN 动态调整图片分辨率(如 ?width=300),懒加载非可视区域图片。
全局变量泄漏:在 `app.js` 中存储大量实时日志数据,且未定期清理。
修复:改用 `wx.setStorage` 存储,并设置 5 分钟自动过期。
总结
开发者应优先检查内存泄漏和资源体积,用户可尝试清理缓存或重启设备。若问题持续,建议通过微信开发者工具的「反馈」功能提交日志。