performance.memory仅限Chrome本地调试，返回瞬时快照且不记录峰值；查峰值应使用DevTools Performance面板录制内存曲线，JS Heap最高点即为峰值，并结合Heap Snapshot对比确认泄漏。
直接看 performance.memory 能拿到实时值，但不推荐单独用它查峰值
Chrome 的 performance.memory API（如 usedJSHeapSize、totalJSHeapSize）确实能读到当前 JS 堆内存使用量，但它有硬限制：必须在 Chrome 启动时加 --enable-precise-memory-info 参数才可用，且仅限本地调试，生产环境默认禁用。更重要的是，它只返回瞬时快照，不记录历史，无法自动捕获“峰值”。你手动轮询 setInterval(() => console.log(performance.memory), 100)，反而会因频繁调用干扰 GC，让数据失真。
用 Performance 面板录制 + 内存曲线图才是查峰值的正解
这是最可靠、可复现、带时间上下文的方式：
- 打开 DevTools → 切到
Performance面板 → 勾选顶部的Memory复选框（默认不勾） - 点击左上角 ● 录制按钮 → 在页面执行关键操作（比如加载编辑器、粘贴大段 HTML、连续撤销 20 次）→ 停止录制
- 录制结束后，时间轴下方会出现四条曲线：
JS Heap、Documents、Nodes、Listeners；其中JS Heap的最高点就是本次操作的内存占用峰值 - 把鼠标悬停在峰值位置，能看到精确数值（如
JS Heap: 42.7 MB）和对应时间戳，还能下拉火焰图定位到触发该峰值的具体函数调用栈
Heap Snapshot 对比才能确认是不是泄漏，不是光看峰值
单次峰值高 ≠ 有问题；反复操作后峰值持续抬升，才是泄漏信号。这时要用堆快照做差分分析：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 操作前拍一张快照（
Memory面板 →Heap snapshot→Capture heap snapshot） - 执行疑似泄漏的操作（如打开/关闭模态框 5 次、切换编辑器 tab）
- 再拍一张快照 → 点击第二张快照右上角的
Comparison下拉菜单 → 选中第一张快照 - 重点关注
Retained Size列明显增长的对象类型，尤其是：-
Detached DOM tree（说明 DOM 节点被移除但仍有 JS 引用） -
Closure（闭包持有大量数据或 DOM） -
Array或Object实例数暴增且Shallow Size小、Retained Size大（典型缓存未清理）
-
任务管理器里看标签页整体 JS 内存更直观，但粒度太粗
Chrome 任务管理器（Shift + Esc）显示的是整个渲染进程的 JavaScript memory 和 JS heap size，优点是无需打开 DevTools、长时间运行也能观察趋势；缺点是看不到具体哪段代码导致，也无法区分多个 iframe 或 Service Worker 的内存归属。适合快速判断：“这个 HTML 编辑器标签页是不是越用越卡？”——如果空闲状态下 JS heap size 从 80 MB 涨到 320 MB 且不回落，基本可以断定存在泄漏，该进 Performance 或 Memory 面板深挖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
