排查网页内存泄漏和频繁垃圾回收，核心是观察内存下限是否持续爬升、对比堆快照锁定异常保留对象、结合任务管理器验证gc频率，并通过保留路径确认强引用链未及时断开。
排查网页内存泄漏和频繁垃圾回收，核心是观察内存变化趋势、定位异常引用、验证回收行为是否受阻。关键不在于“看到内存涨了”，而在于识别“不该留下的内存为什么没被释放”。
看内存下限是否持续爬升
打开 Chrome 或 Edge 的 DevTools → Performance 面板，勾选 Memory 复选框，录制一段典型用户操作（如打开/关闭弹窗、切换 Tab、滚动加载）。
- 重点看 JS Heap 折线图的底部边界（即内存下限），不是峰值
- 如果每次操作后，下限都比前一次高（例如从 12MB → 14MB → 16MB），说明常驻对象在累积，极可能是内存泄漏
- 若下限稳定，但峰值剧烈抖动且频繁回落，更倾向是频繁垃圾回收——这时主线程会卡顿、交互延迟
用堆快照对比锁定泄漏对象
切换到 Memory 面板，按顺序拍三张快照：
- Snapshot 1：页面空闲时（刚加载完）
- Snapshot 2：执行可疑操作后（如打开一个列表页）
- Snapshot 3：执行清理动作后（如关闭列表页、销毁组件）
对比 Snapshot 2 和 Snapshot 3，筛选 Objects allocated between Snapshot 2 and Snapshot 3，再按 Retained Size 降序排列。重点关注：
- 大量未释放的闭包（
(closure)）、数组、字符串或自定义类实例 - Detached DOM 节点（显示为
HTMLDivElement等但状态为 detached） - 构造函数名含第三方库名（如
VueComponent、ReactFiberNode）却数量异常增长
查任务管理器确认 GC 频率与内存类型
按 Shift + Esc 打开浏览器任务管理器，右键表头启用 JavaScript memory 和 Memory 两列：
- Memory 列反映原生内存（DOM 节点、渲染资源等），持续上涨可能指向 DOM 泄漏
-
JavaScript memory 中括号内的实时值（如
18.4 MB (24.7 MB)）是 JS 堆实际占用，前面数字是当前活跃量 - 若 JS 堆数值频繁在几秒内大幅升降（如 15MB → 30MB → 12MB → 28MB），说明 GC 正高频触发，主线程被反复暂停
结合保留路径追溯根引用
在堆快照中选中可疑对象 → 点击右侧 Retainers 标签 → 展开保留路径（Retaining Path）：
- 看最顶部是不是
window、globalThis、timer、eventListener或长期存活的缓存对象 - 常见泄漏链：
window → setInterval 回调 → 闭包 → 组件实例 → 大数组，或document → eventListener → handler → this → Vue 实例 - 路径中出现
WeakMap或WeakSet通常安全；若全是强引用（Object、Array、Function），就需检查是否该断开却未断开
