Helping the garbage collector?

@DrakimDec 18.2008

So, I’m having some trouble with garbage collector, especially that of Firefox. Basically, I have an application which involves a lot of animation and objects. The browser runs the whole thing very smoothly, but suddenly get hiccups which makes the animation jump. After some searching, I found that such things are usually caused by the garbage collector.

I also found that the garbage collector is very wild and uncontrollable. There are some IE specific methods, but in general, you have very little control.

So, I wonder, is it possible to help the garbage collector along by using delete to get rid of objects manually? What should I use this on? Only objects? or even variables?

And are there other methods to make the garbage collector behave more nicely?

to post a comment

JavaScript

8 Comments(s) _↴

@rnd_meDec 18.2008 — #if an object is not closed, delete will tag the memory to be collected.

monitor you app's memory usage in the task manager. If it's not spiking, you probably have something else causing the hiccups. i suspect it's something else.

if you are doing animation, you want to keep your stack as short as possible. string-parameter setTimeout calls and eval are probably the biggest processor hogs. dom stuff is slow as well, so do as much off-document as you can.

@toicontienDec 18.2008 — #For animations, you might try instantiating as few new animations as possible, and reuse animation objects that have already run their course. If you are constantly running an animation, then instantiating another animation object and assigning it to the same variable, there is a lot of garbage collecting going on. Try to reuse as many objects as possible, and prevent your script from removing variables that point to those objects. When the page unloads, do some final clean up work on your objects so they can be properly garbage collected.

I don't really have a set pattern you can follow, but I've started creating a global object for managing multiple objects of the same type. A project I'm working on is a JavaScript API bridge for multiple map services, like Google and Yahoo maps. I have a global object called MapFactory where you can create map objects, and then add those map objects to the factory:

[code=php]var m = MapFactory.create("google");
 
 /*
 Code to do what you want to do with Google maps goes here
 */
 
 // Add map object to MapFactory
 MapFactory.add(m);
 
 // Remove global reference to map object
 m = null;[/code]

In the window.unload event, I call MapFactory.destroy(), which in turn loops through all the map objects that were created and calls the destroy() methods on those objects, which does all the final clean up work when the page exits.

[code=php]window.onunload = function() {
 MapFactory.destroy();
 };[/code]

The MapFactory object I wrote is based on the Factory Pattern in programming.

You could do something similar with your objects of the same type.

@DrakimauthorDec 18.2008 — #@rnd me

Yeah, I do all the regular things, like using setTimeout to a function, and changing the DOM positions as little as necessary.

The thing is that these spikes are completely independent to my main loop flow. It can run 60-80 frames before the animation suddenly stops for half a second, and then continues 60-80 frames without a problem.

My application doesn't have anything that could cause that, I think. Everything is done each frame, and nothing is "saved up" for later. If I did use some slow code, it would probably be reflected with a slower animation in general, or constant lag.

@DrakimauthorDec 18.2008 — #But, does anybody know if using the "delete" command is any nicer on the garbage collector?

@Declan1991Dec 18.2008 — #Could you slow it down by a couple of frames and see would it work any better?

You're best bet from what you've said would be to time each section of the code and see what could be slowing it down. I agree with rnd_me, it sounds like a problem somewhere else.

@astupidnameDec 18.2008 — #Also, setTimeout especially when passed as a string, is undesirable for animations. I almost always place the animation code in an anonymous function and use setInterval instead to run the anonymous function. It certainly seems to run better for me than doing repetitive things with setTimeout. setTimeout is for when you want to wait a bit and do something once. setInterval is for anything that is to be repetitive in nature (like moving stuff pixel/s at a time).

Although, as the others have said, I too suspect your problem is actually at some sort of "trade-off" point in your code is what it sounds like to me. Like when the animation changes from one state to another or something, must be a glitch in the code there. I just recently had to debug a similar thing I had coded, and it was at just such a "trade-off" point.

@DrakimauthorDec 18.2008 — #I've looked over the code several times, and I'm convinced that nothing in it could cause hiccups of the sort I'm experiencing. Especially considering it's not happening in other browsers than Firefox, which I'm told has a very aggressive garbage collector.

Anyways, I'll try to free up objects with delete and reuse them when I can, and check if the hiccups becomes weaker.

@Declan1991Dec 18.2008 — #Looking at the code is no use to be perfectly honest, you'll have to time each bit of it to see what is causing the problems. I find the Firebug addon excellent for that sort of thing.

Also in #JavaScript _↴

Is there a js command that waits until previous commands have completed?Is anyone willing table width in firefox not expanding to fill space

Success!

Help @Drakim spread the word by sharing this article on Twitter...

Tweet This

Helping the garbage collector?

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Helping the garbage collector?

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴