V8系统内存占用过高排查及大数组检测方法咨询

一、(system)内存异常增长的排查步骤 #

1. 区分JS堆与系统内存边界 #

先确认Memory面板中JS堆内存的变化：如果JS堆稳定但(system)持续增长，问题大概率出在浏览器原生资源（DOM、GPU、渲染层、原生API实例）；若两者同步增长，则可能是JS对象间接持有了这些资源的引用。

2. 录制完整性能流程定位高频操作 #

打开Performance面板，勾选「Memory」选项，录制页面切换的完整流程。结束后查看：

• 内存变化曲线是否和页面切换操作强关联；
• Call Stack中是否有重复触发的DOM创建、原生API调用（如Canvas绘制、WebSocket连接），这类操作容易产生未释放的系统资源。

3. 强制GC后验证内存回收情况 #

在Memory面板点击垃圾桶图标触发强制垃圾回收，观察(system)内存是否下降：

• 若仍无下降，优先排查未正确销毁的原生资源（如未关闭的WebSocket、未释放的WebGL上下文、未清除的Canvas缓存）；
• 若有部分下降，说明存在JS引用导致的资源滞留，继续分析Heap快照。

4. 排查DOM与闭包泄漏 #

• 生成两次页面切换后的Heap快照，对比筛选「Detached DOM Tree」，查看是否有大量未被回收的分离DOM节点——这类节点若被全局变量、闭包或未移除的事件监听持有，会占用系统内存；
• 过滤「Closure」类型，检查是否有长期存活的闭包保留了组件实例或DOM引用。

5. 排除外部干扰 #

用Chrome无痕模式测试，排除扩展程序占用系统内存的可能；同时升级Chrome到最新稳定版，验证是否为浏览器已知bug导致的内存泄漏。

二、判断是JS引用问题还是Chrome内部问题 #

• JS引用导致：JS堆与(system)内存同步增长，Heap快照中可见大量重复创建的对象（如每次切换页面生成新数组、组件实例），且强制GC后JS堆内存无明显下降；
• Chrome内部问题：JS堆内存稳定，但(system)持续增长，排查后无未释放的原生资源引用，且升级浏览器或换用其他Chromium内核浏览器后问题消失。

三、检测现存最大数组的方法 #

1. 利用Memory面板Heap快照 #

生成Heap快照后，在筛选框输入Array，点击「Retained Size」或「Shallow Size」列排序，即可直接查看内存占用最大的数组，还能通过「Retainers」面板追踪数组的引用链。

2. 控制台遍历检测（测试环境使用） #

执行以下代码可遍历全局对象，找出内存占用最大的前10个数组：

function findLargestArrays() {
  const seen = new WeakSet();
  const arrays = [];
  function traverse(obj) {
    if (!obj || typeof obj !== 'object' || seen.has(obj)) return;
    seen.add(obj);
    if (Array.isArray(obj)) {
      try {
        const size = new Blob([JSON.stringify(obj)]).size;
        arrays.push({ length: obj.length, size, obj });
      } catch (e) {}
    }
    Object.values(obj).forEach(val => traverse(val));
  }
  traverse(window);
  return arrays.sort((a, b) => b.size - a.size).slice(0, 10);
}
console.table(findLargestArrays());

注意：该方法会遍历大量对象，可能导致页面短暂卡顿，仅在测试环境使用。

内容的提问来源于stack exchange，提问作者user2953241