小程序越用越卡？长任务、白屏与内存泄漏的排查清单

导读：小程序用着用着开始卡顿、白屏、闪退，用户边骂边卸载。小程序卡顿不像 Web 能直接开 DevTools 看，排查要按"长任务-白屏-内存"三条线走。这篇文章给出一套可照抄的排查清单，每步带代码要点。

一、先分清三类卡顿

小程序卡顿分三种，症状不同、原因不同：

• 交互卡顿：点按钮半天没反应，通常是主线程被长任务阻塞（复杂渲染、同步大循环）；
• 白屏：页面空白或首屏加载慢，通常是分包加载、首屏请求、渲染时序问题；
• 闪退/越用越卡：通常是内存泄漏（定时器、监听器、大对象未释放）。

// 常见长任务：同步遍历大列表
const list = await getBigList(); // 一次拉 10000 条
list.forEach(item => buildCell(item)); // 主线程被堵死

二、长任务排查：找出谁占主线程

小程序有官方性能面板，能看主线程耗时。排查顺序：先看页面级耗时（onLoad/onShow 里做了什么），再看组件级（每个组件渲染多久），最后定位到具体代码。常见雷区：

• onLoad 里同步请求 + 同步渲染大列表；
• setData 一次传超大数据（超过 1MB）；
• 复杂 wxml 绑定表达式（每次渲染都重算）。

// 优化：setData 分片，避免一次传大对象
const pageSize = 20;
for (let i = 0; i < items.length; i += pageSize) {
  this.setData({ list: items.slice(i, i + pageSize) });
  await sleep(16); // 让出主线程
}

三、白屏排查：首屏加载与渲染时序

白屏分"加载慢"和"渲染不出来"。加载慢查网络：首屏依赖的接口是不是串行、图片有没有懒加载；渲染不出来查时序：数据未就绪就渲染、条件渲染表达式写错导致整块不显示。用"骨架屏 + 分步渲染"兜底：先出骨架，数据到了再渲染内容，用户感知就不一样。

四、内存泄漏排查：定时器、监听器与全局缓存

小程序里最常见的泄漏是定时器没清、监听器没解绑、全局缓存只增不减。每个页面 onUnload 时必须清定时器、解绑事件；全局数据（登录态、用户信息）存 storage 而不是内存变量；图片/大对象用完置空。

// onUnload 清理示例
onLoad() {
  this.timer = setInterval(() => {}, 1000);
  someBus.on("event", this.handler);
}
onUnload() {
  clearInterval(this.timer);
  someBus.off("event", this.handler);
}

内存趋势还可以用性能面板看：页面切换后内存是否回落，只涨不跌就是泄漏的典型信号；低端机（如 2GB 内存机型）单独看崩溃率，真机差异比开发者工具明显得多。

五、踩坑清单

• setData 一次传大数组：渲染卡死。分片传输。
• onLoad 串行请求：首屏等两个接口依次返回。并行请求 + 分步渲染。
• 定时器不清：页面来回切换越用越卡。onUnload 统一清理。
• 图片不懒加载：列表页加载几百张图。懒加载 + 合理尺寸。
• 全局缓存无限增长：内存撑爆。定期清理 + 存储化。
• 只在真机复现：开发者工具不卡真机卡。用真机调试面板定位。

六、工程落地建议

小程序性能按"监控-定位-治理"三层做：先接性能与错误监控（长任务、白屏率、崩溃率），再按主线程耗时定位到具体页面和代码，最后治理 setData、定时器、图片加载三类高频问题。上线前重点演练：弱网首屏、低端机长列表、页面频繁切换。落地时建议把性能排查拆成"监控-定位-治理"三层，同类分层在乔拓云轻应用的监控模块中有对应实现，卡顿率用线上性能面板持续度量。

七、复盘清单

• 首屏是否有骨架屏？关键接口是否并行？
• 页面退出是否清理定时器与监听器？全局缓存是否有限？
• setData 是否分片？图片是否懒加载？
• 内存趋势是否监控？低端机崩溃率是否单独看？

结语：小程序卡顿不是玄学，按"长任务、白屏、内存"三条线排查，每个问题都有明确的代码解法。把监控先接上，卡顿率就能被看见。本文与《门店一天赚没赚？营业日结、毛利统计与异常预警怎么做》同属企业数字化落地避坑系列，可对照阅读。