什么可能导致我的JavaScript中的大量内存峰值？

Question

运行我的代码后，我得到：

每秒多次在4到12MB之间不断达到峰值。

Here is the full thing.

我已经将它缩小到draw（）函数或settarget（）函数中，但是我无法弄清楚导致这么多垃圾的原因。

This is the code

有什么可能造成这么多垃圾？

Answer 1

从我可以使用Chrome's Heap Profiler收集的内容看起来你创建了大量的数组，数字和字符串。 （对于这样的动画来说并不奇怪。）这条线看起来很可疑：

rgbcolor = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';

每个帧都需要每个点，并创建（至少）一个新的String对象，以及Math在引擎盖下执行的各种与数字相关的内容。

那就是说，这是否会给你造成实际问题，还是仅仅是锯齿形记忆曲线在惹恼你？对于垃圾收集的运行时来说，这种内存配置文件并不常见，而且锯齿峰值不随时间增加的事实似乎表明你实际上没有任何内存泄漏。此外，Chrome（以及大多数现代浏览器）都非常擅长优化代码，以创建像这样的瞬态对象。

Answer 2

我实际上认为这一行在这里：

 window.setTimeout(callback, 1000/60);. 

如果您查看控制台工具中Memory下的详细信息，您将看到动画帧被触发，然后重新触发，然后重新触发每个17ms恰好是1000/60四舍五入。

您可以打开初始调用：

(function animloop() {
window.requestAnimFrame(animloop);

然后，您会看到每个17ms之后您的流程再次产生。