运行我的代码后,我得到:
每秒多次在 4 到 12MB 之间不断达到峰值。
我已经将它缩小到可能在 draw() 函数或 settarget() 函数中,但我无法弄清楚是什么导致了这么多垃圾。
是什么导致了这么多垃圾?
运行我的代码后,我得到:
每秒多次在 4 到 12MB 之间不断达到峰值。
我已经将它缩小到可能在 draw() 函数或 settarget() 函数中,但我无法弄清楚是什么导致了这么多垃圾。
是什么导致了这么多垃圾?
从我可以使用Chrome 的堆分析器收集到的信息来看,您似乎正在创建大量的数组、数字和字符串。(这样的动画并不奇怪。)这条线对我来说很可疑:
rgbcolor = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
每个帧上的每个点都会调用它,并创建(至少)一个新的 String 对象,以及 Math 在后台执行的各种与 Number 相关的东西。
也就是说,这会给您带来实际问题,还是只是锯齿状内存配置文件困扰着您?这种内存配置文件对于垃圾收集运行时并不少见,而且锯齿波的峰值不会随着时间的推移而增加这一事实似乎表明您实际上并没有在任何地方发生内存泄漏。而且,Chrome(和大多数现代浏览器)也非常擅长优化创建此类瞬态对象的代码。
我实际上认为它的这条线在这里:
window.setTimeout(callback, 1000/60);.
如果您查看Memory
控制台工具中的详细信息,您将看到动画帧正在被触发,然后重新触发,然后重新触发每个17ms
恰好被1000/60
舍入的帧。
您可以打开初始呼叫:
(function animloop() {
window.requestAnimFrame(animloop);
你会看到,17ms
在这之后你的进程再次产生了自己。