在 chrome 开发工具中的 js 堆上构建“（编译代码）”是什么意思？ 这是 memory 泄漏吗？

Question

我一直试图在我的 ReactJS web 应用程序中追踪一个小的 memory 泄漏。 它在 10 分钟左右的时间内增加了 10-30 mb。

我使用 chrome 开发工具拍了 3 张堆快照：1 张是在页面加载后稳定的 state，1 张是在我执行我怀疑泄漏的操作之后，第 3 张是在第二次执行该操作之后。 现在我正在查看快照之间正在构建的内容。

我看到了几件事，并且正在努力修复它们，但是在我的快照之间堆积在堆上的第一大罪魁祸首是(compiled code) 。 我正在努力理解这代表什么，以及它是否是泄漏。

在页面完全加载并处于稳定的 state 后，什么会导致代码加载到 memory？ 这是否表明泄漏？

Answer 1

（这里是 V8 开发人员。）

在页面完全加载并处于稳定的 state 后，什么会导致代码加载到 memory？

V8 动态编译您的 JavaScript 代码。 目前，它的执行管道是这样的：

• 当您第一次加载页面时，V8 只会非常简短地查看所有 JavaScript 源代码以找出存在哪些函数以及它们的定义位置。
• 第一次调用 function 时，它被编译为“字节码”，这是 V8 解释器可以执行的 JS 源代码的一个非常简单的处理版本。
• 当 V8 观察到解释给定的 function 花费了一些时间时，它会将其编译为未优化的机器代码。 这种编译非常快（因为没有执行优化），生成的代码比解释器快很多，但远非完美。
• 当 V8 观察到在这样的 function 上花费了更多时间时，它最终会为其安排一个优化的编译作业。 优化编译器在后台运行，花更多的时间在优化上，并产生更好的代码。 一旦完成给定的 function，下一次对该 function 的调用就可以使用优化的机器代码。

（这跳过了很多细节，但这就是它的要点。此外，我们一直在研究 V8，所以如果你找到五年前的文章，它们会描述类似但不同的情况；并且该团队目前正在再次尝试稍微改变一下，所以这个描述可能会在适当的时候变得有些过时。这里有一些进一步的阅读。）

在页面加载期间很少有函数被编译为机器代码，这是完全正常的/预期的，特别是因为在那里运行的许多代码只运行一次来设置东西。
一旦您开始使用页面的功能并且您的一些 JS 函数重复运行和/或运行更长时间，它们将被编译为机器代码，因此您将在堆快照中看到更多(compiled code) 。

这是否表明泄漏？

不，它只是表明多层 JIT 编译系统正在执行它的工作。

（如果您观察到代码量永远增长，例如，每次您重复某个操作时，您都会获得 X 量的额外编译代码，并且这种增长永远不会停止，那么这听起来像是泄漏。但这不是您所描述的。 )