Possible memory leak with requestanimationframe

[mtycholaz]

I'm a beginner with JavaScript memory profiling in chrome so forgive me if this turns out to be a non-issue.

I've loaded skrollr using requirejs onto the page. I have one single element with data attributes

Basically it animates the background image as you scroll :P

When I navigate to my page and just let it sit, my memory usage slowly climbs. Not by much, but it climbs. If I leave my tab open I can watch the memory usage climb (2,090,221K) in the task manager (unless you change tabs which would stop requestanimationevent from firing).

Opening up the chrome profiler reveals that the js heap is in fact climbing during the requestanimationframe code. I don't know what or where the leak is but I've included the timeline in the link below. You can load it up to take a look.

http://1drv.ms/1lTNMam

[Prinzhorn]

Thanks for checking that out. How long did you leave it running? Check out my screenshot, I assume at some point the garbage collector kicks in and that the used memory simply comes from all the temporay variables skrollr needs when rendering.

If it drops for you as well from time to time, then there's nothing to worry I guess.

[Prinzhorn]

Found it

[mtycholaz]

In my recorded case above, I left it running for 17 seconds. Nothing was GC in that time.

The only reason I looked into this was because I left my desk for a 30 minute meeting and when I came back my chrome task manager showed the page memory usage over 2,000,000K

I've done another test this morning. Here's my findings. Leak is within the 36s to 8.1 min range.

Also here is my page running in the task manager.

Also here is the timeline data from chrome. You can load it up yourself to view the leak data. It's a very big file (48MB) so don't be surprised if it takes time to first load

http://1drv.ms/1pbqTu2

[mtycholaz]

When you say you "Found it", do you mean you found the memory leak and fixed it, or are you referring to something else?

[giathinh910]

I concern the the same issue here. The proccess of the tab that use skrollr consume a lot of the memory. Unless I change to another tab, the memory increase continuously and on end. Hopefully you can fix it soon.

[Prinzhorn]

It may be an issue with defining the animation loop like this

var requestAnimFrame = polyfillRAF();

 //Let's go.
 (function animloop(){
    _render();
    _animFrame = requestAnimFrame(animloop);
}());

Maybe this way we end up copying all the variables in the init scope into the heap of the animloop function for every single time it is called.

Since I can't reproduce it on my machine (possible due to the OS) someone could try to debug this further.

[mtycholaz]

After leaving my computer on all weekend, here's what the task manager shows.

[Prinzhorn]

I'm taking this serious, since it may be related to #330 and memory leaks suck. I already have a theory and I will spend some time on this ticket in the next days (thanks to an unnamed company who sponsors 4 hours of research on this).

[Prinzhorn]

@mtycholaz can you confirm that this also happens on http://prinzhorn.github.io/skrollr/ and not just on your simple page? Because I still can't reproduce this. I get the same pattern on a different machine, the GC kicks in every few seconds.

Also: does triggering GC manually do anything (that trash can icon)?

[Prinzhorn]

@mtycholaz please also consider https://code.google.com/p/chromium/issues/detail?id=120186

[mtycholaz]

@Prinzhorn I have done as you've asked and I can reproduce the issue on the main skrollr page. If I move the scroll bar then GC does occur, and when I click the trash icon GC occurs again. Then if I let it sit I can see the garbage collecting.

Interesting find with the Chromium issue. This very well sounds like the issue that we're experiencing. I've checked out memory performance in FireFox and IE11 and they both appear to be reasonable.

And seeing how you're using a different OS, then this issue, in my opinion, appears to be a valid Chrome bug in the Windows code base. I've added my findings to the comments.

[anonyco]

This might be a memory leak, this might be some code forgotten to write for the GC, or this might be something else. At any rate, this issue is alive and well. Watch (from the task manager) as chromes memory usage ascends to the heavens when you run the following javascirpt code:

setInterval(function(){
	var i=32768;
	while (i--) {
		requestAnimationFrame( new Function() );
	}
}, 10);

P.S. I put the setInterval in there so that the code doesn't brick the page so that you can have a chance to see the really high memory usage.