JavaScript内存峰值检测需组合多种方法：用performance.memory实时采样追踪瞬时峰值，DevTools Memory面板捕获操作真实峰值，任务管理器观察长期趋势，堆快照对比识别泄漏型峰值上升。
在 JavaScript 环境中检测内存峰值使用情况，核心是捕获运行过程中 JS 堆（JS Heap）的最高占用量。浏览器不提供直接“监听峰值”的 API，但可通过组合工具和策略实现准确追踪。
浏览器控制台直接读取当前堆状态
在 Chrome、Edge 等基于 Chromium 的浏览器中，window.performance.memory 是最轻量、最常用的方式：
-
usedJSHeapSize：当前已使用的堆内存（字节），实时变动 -
totalJSHeapSize：当前堆总容量（字节），随 GC 动态调整 -
jsHeapSizeLimit：堆大小硬性上限（通常约 4GB）
注意：performance.memory 只能在主线程安全访问，且需页面启用 memory 权限（多数现代网站默认允许）。可封装一个简单峰值监测器：
let peak = 0;
function trackPeak() {
const mem = performance.memory;
if (mem.usedJSHeapSize > peak) {
peak = mem.usedJSHeapSize;
console.log(`当前峰值: ${(peak / 1024 / 1024).toFixed(2)} MB`);
}
}
// 每秒采样一次（避免高频开销）
setInterval(trackPeak, 1000);
开发者工具 Memory 面板抓取真实峰值
控制台数值是瞬时快照，而真实峰值常出现在用户交互或异步操作高峰。推荐用 DevTools 的 Memory 面板手动触发记录：
立即学习“Java免费学习笔记（深入）”；
- 打开 DevTools → Memory 标签页
- 选择 “Allocation instrumentation on timeline” 模式
- 点击录制按钮 → 执行目标操作（如加载列表、切换路由）→ 停止录制
- 时间轴中会显示 JS 堆曲线，最高点即为本次操作的内存峰值
该方式能排除采样误差，还能定位峰值对应的具体调用栈，适合排查单次重操作的内存暴增。
浏览器任务管理器观察长期趋势
Shift+Esc 打开浏览器内置任务管理器，右键表头勾选 “JavaScript 内存” 列：
- 显示两列数字：如
125.4 MB (89.2 MB) - 括号内数值（89.2 MB）是活跃对象实际占用，即“有效峰值参考值”
- 持续观察该值在长时间操作（如滚动、动画、轮询）中的最大值，可反映稳定态下的内存压力
这个方法无需代码侵入，适合 QA 或线上监控阶段快速判断是否存在持续增长趋势。
自动化脚本 + 多快照比对验证泄漏型峰值
若需确认是否因内存泄漏导致峰值不断推高，可用堆快照（Heap Snapshot）对比：
- 在关键节点（如进入页面、执行操作后、离开前）各拍一张快照
- 在 “Comparison” 视图中，筛选
Objects allocated between snapshots - 重点关注
Retained Size持续增大的构造函数（如Array、Object、自定义类或闭包） - 峰值本身未必异常，但若每次操作后峰值都不可逆上升，说明存在泄漏
这种方式不给出精确数值，但能解释峰值为何越来越高——这是判断“健康峰值”与“危险峰值”的关键分水岭。
