Chrome DevTools堆快照中Code与System Objects解析及增长问题咨询

你好，针对你在对比堆快照时遇到的疑问，我来详细拆解这两个统计项的含义，以及Code占用持续增长背后可能的问题：

一、统计板块中Code和System Objects的具体含义 #

1. Code（代码段） #

这里的Code指的是V8引擎编译后的JavaScript字节码、已编译的函数体、模块代码及相关元数据。当你的JS代码运行时，V8会把源码转换成高效的可执行代码（字节码为主，部分高频函数会生成机器码），这些编译后的代码块就存在堆内存里，对应快照里的Code分类。

• 具体包含：函数的编译结果、类定义的字节码、ES模块的代码片段、V8为优化性能生成的代码缓存等。
• 划重点：它不是你写的原始源码，是V8处理后能直接执行的代码形式。

2. System Objects（系统对象） #

System Objects是浏览器或V8引擎自身创建管理的内部对象，和你的应用代码直接创建的对象不是一回事。

• 具体包含：V8垃圾回收的标记对象、编译器的中间缓存结构、DOM/BOM的底层支撑对象、Web API的内部实现实例（比如Promise的状态管理对象、XMLHttpRequest的底层逻辑对象）等。
• 这些对象一般由引擎管控生命周期，但如果你的代码不小心持有了它们的引用，也会影响内存回收。

二、Code占用量持续增长意味着什么？ #

当多次堆快照对比发现Code占用一直在涨，通常说明V8在持续编译新的代码，而且这些编译后的代码块没被垃圾回收掉，常见原因有这几种：

• 频繁动态生成/执行代码：如果你的应用经常用eval()、new Function()，或者开启了Webpack模块热替换（HMR）、大量使用动态import()这类功能，V8会不断编译新的代码块存在堆里。要是动态加载的模块/函数没被正确卸载（比如HMR后旧模块的引用没清掉），Code段就会越积越多。
• 大量短生命周期未优化函数：V8会给高频执行的函数生成优化代码，但如果你的应用有大量只跑几次就不用的函数，V8还是会编译它们，要是这些函数的引用链没断开（比如闭包抓着不放），对应的Code块就没法被回收。
• 第三方库的动态代码逻辑：有些第三方库（比如动态渲染的前端框架、代码高亮工具、动态表单生成库）会在运行时生成并编译JS代码，如果这些库本身有内存泄漏问题，就会导致Code段持续膨胀。
• 内存泄漏导致Code块无法回收：要是你的代码里有闭包引用了已没用的函数，或者全局变量拿着模块/函数的引用，哪怕这些代码不再被使用，对应的Code块也没法被垃圾回收，自然占用就一直涨。

三、排查小建议 #

• 用Chrome DevTools的Retainers（保留树）面板：选中Code分类下的具体条目，看看哪些对象还在引用这些代码块，就能定位到泄漏的根源。
• 暂时禁用动态代码功能（比如关掉HMR、替换掉eval的使用），看看Code占用会不会停止增长，确认是不是动态代码搞的鬼。
• 检查第三方库的版本，看看有没有已知的内存泄漏问题，尝试升级到最新稳定版。

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