Question

Upon running my code I get:

Constantly peaking between 4 and 12MB multiple times a second.

Here is the full thing.

I’ve narrowed it down to be likely in the draw() function or the settarget() function, but I cannot figure out what is causing so much garbage.

This is the code

What in there could be causing this much garbage?

Answer 1

From what I can glean using Chrome’s Heap Profiler it kind of looks like you’re creating a lot of Arrays, Numbers, and Strings. (Not surprising for an animation like this.) This line looks suspicious to me:

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

It’s called for every dot on every frame, and creates (at least) one new String object, plus the various Number-related stuff that Math does under the hood.

That said, is this causing actual problems for you, or is it just that the saw-tooth memory profile is bugging you? This sort of memory profile is not at all uncommon for garbage-collected runtimes, and the fact the peaks of your sawtooth don’t increase over time would seem to indicate you don’t actually have a memory leak anywhere. And, too, Chrome (and most modern browsers) are very good at optimizing code that creates transient objects like this.