javascript - Chrome 快速内存泄漏。运行 Javascript Profiler 修复泄漏时如何调试？

Question

我正在使用 Canvas 制作游戏，遇到了我无法确定的奇怪的 Chrome 行为。有时当我加载游戏时，Chrome 任务管理器会报告它正在每秒分配 +300MB 的内存，在短短 10 秒左右的时间内增加到超过几 GB 的内存，并且直到选项卡崩溃才会停止.

当我尝试运行 javascript 探查器时，问题停止了。当我在分析器运行的情况下加载选项卡时，它非常稳定。当问题发生时，然后我启动分析器，它会立即从 1.5GB 稳定到 40MB。堆快照向我展示了游戏稳定运行时我的预期。

我的游戏在 window.setInterval 上运行(我已经尝试了 requestAnimationFrame 和递归 setTimeout 并且问题仍然存在)，并且它设置得高时会更频繁地发生，这意味着当我将游戏设置为 30FPS 时，这种情况很少发生，而当我将其设置为 60FPS 时，它发生的时间超过一半。这只发生在 Chrome 上，Firefox 似乎没问题。

当 Chrome 似乎只在分析器运行时才进行垃圾回收时，我该如何调试？

此外，我注意到当我将 FPS 提高到 60 时，我的一些动画和键盘输入有点滑稽。我认为这可能是相关的，但在 Firefox 中也是如此。

Answer 1

JavaScript 是单线程的，这意味着所有工作都需要在同一个线程上完成，包括排队事件(来自 setTimeout/rAF、键等)、渲染到 Canvas 等等。

如果循环非常紧凑(时间预算方面)，浏览器将没有任何空间来执行其他任务，例如 GC - 对于 Chrome，此任务似乎是次要的，而 Firefox 给予了更高的优先级(可能会从其引擎中获得更多性能)。基本上，运行代码会阻止浏览器执行代码本身以外的其他事情。

一个很好的指标是，当您降低 FPS 时，为事件队列、清理等留出更多空间。当分析器运行时，它会获得更高的优先级以捕获所有类型的东西所以出于某种原因，当分析器运行时，GC 会在更早的时候“偷偷摸摸”(缺乏更好的术语)。但这是非常特定于浏览器的，我不知道这里的每一个底层细节。

如果浏览器无法清除事件队列中的事件，它最终会堆积起来，在最坏的情况下会阻塞/卡住/崩溃浏览器。

在任何情况下，都很难对此进行调试(出于精确定位的原因)，因为您无法以编程方式访问内存或 CPU 使用情况等。

最接近的是在循环内部代码的开始和结束处使用高分辨率计时器，看它是否接近帧率时间。

例如:

function loop() {

    var startTime = performance.now();

    ... other code ...

    var innerLoopTime = performance.now() - startTime;

    requestAnimationFrame(loop);
}

如果您的帧速率是 60 FPS，那么每帧的时间将为 1000/60，或大约 16.667 毫秒。

如果您的 innerLoopTime 非常接近这个时间，您就会知道您需要优化循环内执行的代码，或者降低帧速率。

您可以使用调试器获取函数内每步的时间成本，但调试器本身会增加总开销。测时间也是如此，但是成本更低.. 这个怎么折腾都是妥协的问题。