Jump to content
Search Community

Memory leaks during tweening multiple objects

Fusion2222 test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everyone,

 

I am trying to do a webpage, with bubbles in a background, to create interesting visual effect. I chose GreenSock to do a job, but when i came to chrome developer tools for memory inspection, i saw very ugly, still growing Sawtooth graph. It was growing even after a minutes of memory usage recording. I became performance paranoid, so i removed all (even local) variables after usage. Now i am 100% sure, that still growing sawtooth is a GreenSock thing.

 

So my question is what is wrong here? It is normal for javascript animations to consume memory like this? do Greensock have any memory leaks? Is GreenSock useable in this "Bubble" case? I dont want to create website, that will consume too much memory after minute of usage, and later causes problems for low-memory visitors.

 

I added screen of memory usage recording if it is helpful

 

post-31997-0-32051300-1411997194_thumb.png

See the Pen mnclG by anon (@anon) on CodePen

Link to comment
Share on other sites

It is absolutely normal for JS-based animation to use memory like that, and the sawtooth isn't reason for concern - if the memory wasn't going back down at all, that could point to a problem. We have done quite a few tests (as have others) of GSAP and we're not aware of any memory leaks whatsoever. GSAP is used by some of the largest companies on the planet in major games, sites, business-critical apps, etc. and nobody has confirmed a memory leak in GSAP that I know of, but of course we'd definitely want to fix any problems that exist in the engine. If you have solid evidence of a leak, please send it our way. I didn't see evidence in your post, but perhaps I missed something. When I turned on profiling in Chrome's Dev tools, I didn't see continuous increase as you described - I saw gc cycles happening, and bringing the memory back down as it should. 

  • Like 1
Link to comment
Share on other sites

  • Solution

Hello, I don't know if this will help your situation.. but Google Chrome Dev Tools Team recommends to make sure you’re in Incognito mode when testing. Extensions and apps can skew the figures that are reported when profiling performance.

 

Opening Incognito mode in Chrome:

 

PC

Ctrl + Shift + N,

 

Apple Device

Cmd + Shift + N

 

:)

  • Like 5
Link to comment
Share on other sites

  • 1 month later...

Thanks Johnatan, that was the case! Looks like i was too paranoid. But i would like to ask one more thing. As i explored test site with chrome dev tools, i find out, that even including GSAP library into HTML page generates 5 detached DOM objects. Is this okay?

Link to comment
Share on other sites

Hi Johnatan,

 

Here it is:

 

With no GSAP included:

http://snag.gy/XA2fL.jpg

 

With GSAP included:

http://snag.gy/EeWaC.jpg

 

I must say, that i am not performance guru so maybe i am wrong, detached DOM elements are maybe not causing any bigger harm, but i just wanna make sure. What i studied about chrome dev tools, detached dom tree elements are so commom source of memory leaks, that dev tools by standard highlight single detached elements with red color (for developers to detect them easily). Again, maybe i am too paranoid and those detached DOM objects are harmless, but even during my exploration of docs, i could not find any explanation for this.

Link to comment
Share on other sites

Yep, those detached DOM objects are harmless, and they're necessary for some of the work that CSSPlugin does. I can't imagine how those could possibly cause some sort of "memory leak". I'm still struggling to find any confirmed problems here - when I tried your codepen, I saw nothing unusual (no perpetually rising sawtooth). If you're still having trouble, could you record a screencast of what you're seeing? I'm just baffled and nobody else that I can remember has reported GC problems like this. You are using the latest version of GSAP, right? 

 

Also keep in mind that Chrome Dev Tools sometimes reports things very incorrectly. Carl and I stumbled upon some crazy stuff the other day that made Dev Tools report tons of extra events constantly when you hit the refresh button instead of using CMD-R to refresh. I love Chrome Dev Tools, but I'm just saying not to put too much faith in things you see there. Are you actually experiencing noticeable performance problems in your site/app? Or are you just looking at some data in Dev Tools that scares you? 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

My scary sawtooth record is okay when i ran tests in incognito mode. Exactly as Jognatan advised. Moreover, i launched newest chrome version, and i have not experienced any scary sawtooth problems at all, even in standard mode.

 

I guess my trouble was old chrome version + not using dev tools in incognito mode, which is obviously my bad.

 

Anyway Jack, thanks for clarification of those 5 detached dom greensock objects. Thank you both for your answers!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...