堆快照是诊断JavaScript内存问题的核心工具，通过Chrome DevTools可捕获某一时刻内存中对象的分布情况，帮助定位内存泄漏。它记录了所有可达对象的类型、大小及引用关系，重点关注Constructor View、Shallow Size、Retained Size和Dominators等指标，能发现闭包、全局变量、未解绑事件等常见泄漏模式。建议在操作前后多次拍摄快照，使用Comparison视图对比分析对象增减，结合引用链追踪确认泄漏源头，从而有效解决页面卡顿或崩溃问题。
JavaScript内存问题常表现为页面变慢、卡顿甚至崩溃，根本原因多是内存泄漏或大量对象未及时释放。堆快照（Heap Snapshot）是诊断这类问题的核心工具，能直观展示某一时刻内存中所有对象的分布情况，帮助定位异常占用。
什么是堆快照
堆快照是JavaScript引擎在某一时刻对内存中所有可达对象的完整记录，包含对象类型、保留大小（Retained Size）、引用关系等信息。通过Chrome DevTools可以轻松获取和分析堆快照，进而发现潜在的内存泄漏点。
如何生成堆快照
使用Chrome浏览器开发者工具操作最直接：
- 打开DevTools，切换到“Memory”面板
- 选择“Heap snapshot”选项
- 点击“Take snapshot”按钮即可捕获当前内存状态
建议在执行可疑操作前后分别拍摄快照，比如打开关闭模态框、加载卸载组件，便于对比分析。
立即学习“Java免费学习笔记（深入）”；
分析堆快照的关键指标
查看快照时重点关注以下几项：
- Constructor View：按构造函数分类对象，如 (closure)、(array)、(object) 等，若某类数量异常偏高，可能存在问题
- Shallow Size：对象自身占用的内存
- Retained Size：该对象被回收后可释放的总内存，包含其引用的其他对象
- Dominators：支配者节点，能帮助识别哪些对象阻止了大量内存回收
例如，发现多个闭包持有大数组引用，而这些闭包又未被释放，就可能是泄漏源头。
识别常见内存泄漏模式
通过堆快照可发现几种典型问题：
- 意外的全局变量：未声明的变量挂在window上长期存在
- 事件监听未解绑：DOM元素已移除但事件仍绑定在闭包中
- 定时器引用外部变量：setInterval内部引用大对象且未清除
- 闭包引用过大作用域：内层函数引用外层函数变量导致整个作用域无法释放
在快照中查找“(closure)”、“Detached DOM trees”等关键词，往往能快速定位问题。
结合时间线进行对比分析
单个快照只能看静态状态，配合多个时间点的快照更能说明问题：
- 操作前拍一张
- 执行操作后拍一张
- 预期应释放资源后再拍一张
若第三次快照中对象数量或内存未回落，说明存在泄漏。使用“Comparison”视图可直接看到新增和未释放的对象。
基本上就这些。堆快照虽强大，关键在于理解对象间的引用关系。只要坚持在可疑操作前后拍照、对比、追踪引用链，多数内存问题都能水落石出。
