HTML本身不支持内存快照，必须通过Chrome DevTools手动操作：打开Memory面板，选择Heap snapshot模式，点击相机图标捕获；快照中看不到局部变量因已被回收，仅保留全局或闭包引用对象。
HTML 本身不做内存快照——这是浏览器 DevTools 的功能，HTML 页面只是被分析的目标。你无法用 HTML 标签或属性触发堆快照，必须通过 Chrome / Edge / Safari 的开发者工具手动操作，或用 chrome.devtools API（仅限扩展）间接控制。
怎么在 Chrome DevTools 里手动拍 Heap Snapshot
这是最常用、最可靠的方式，适合排查内存泄漏、确认对象是否被释放：
- 打开目标 HTML 页面，按
F12或Ctrl+Shift+I（Windows/Linux）/Cmd+Option+I（macOS）唤出 DevTools - 切换到
Memory面板（不是Performance或Application） - 确保顶部录制模式选的是
Heap snapshot（不是 Allocation instrumentation on timeline） - 点击左上角的
Capture heap snapshot按钮（相机图标），等待几秒生成完成 - 快照会以 “Snapshot 1”、“Snapshot 2” 形式列出，可多拍几次（比如操作前、操作后、GC 后）做对比
为什么拍完快照看不到你的 JS 对象？
常见错觉：写了 const user = { name: 'Alice' };，快照里却找不到 user。这不是快照失效，而是因为：
-
user是局部变量，函数执行完就失去引用，V8 会立即回收，快照里自然不显示 - 全局变量（如挂到
window.user）或被闭包捕获的对象才容易保留在堆中 - DOM 节点如果仍被 JS 引用（比如事件监听器没卸载、缓存了
document.getElementById('xxx')结果），会在快照中显示为HTMLDivElement并标出 retainers - 快照默认折叠“系统对象”，需展开
(system)或搜索具体构造函数名（如MyComponent）才能定位业务类实例
用 performance.memory 看实时内存，但别指望它替代快照
performance.memory 是唯一能在 HTML/JS 中直接读取的内存指标，但它只返回三个粗粒度数值：
立即学习“前端免费学习笔记（深入）”；
-
performance.memory.totalJSHeapSize：JS 堆已分配总字节数（含空闲） -
performance.memory.usedJSHeapSize：当前实际使用的字节数 -
performance.memory.jsHeapSizeLimit：硬性上限（通常 ~4GB）
⚠️ 注意：performance.memory 在部分浏览器（如 Firefox、Safari）不可用；即使可用，它也不反映对象结构、引用链或 DOM 关系——和 Heap Snapshot 完全是两类工具。想查“谁持有这个数组”，不能靠它。
自动化拍快照？只有 DevTools 扩展能做到
网页脚本（<script>）无法调用 chrome.devtools.heapProfiler，那是 Chrome 扩展专属 API，且需声明 "devtools" 和 "heapProfiler" 权限。普通 HTML 页面做不到自动触发快照，强行尝试会报错：Uncaught ReferenceError: chrome is not defined。如果你真需要 CI 级内存监控，得换方案：puppeteer 启动 Chrome 并用 CDP（Chrome DevTools Protocol）连接，调用 HeapProfiler.takeHeapSnapshot 方法——但这已脱离“HTML 怎么做”的范畴，属于 Node.js + 浏览器自动化场景。
真正卡住新手的，往往不是“怎么点按钮”，而是拍完快照后看不懂 Retainers 列表、分不清 Closure 和 Object 的区别、误把临时字符串当成泄漏源。快照是证据，不是诊断书——得结合代码逻辑，一帧一帧看引用路径。
