Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jonForum

Tricks to check released memory (GC) memory leaks

Recommended Posts

hey guys, did you have a cool trick to search a specific tween in memory ?
 

In a complexe deep events with multiple promises, i can destroy tweens but also keep some specific looping tween active !
And it become little bit hard when inside a breakpoint , to look and debug in memory if all go fine.
VyT7yRlg_o.png

 

You know when your search current active objects in memory.
It hard to know what tween i need keep or release to gc.
Did you have a tricks or maybe a thing we can do to know what tween are currently in memory when debuging?
The example upper show me when snapp the memory, i have 10 tween in memory can't release in GC , and it hard to know wish and where the are come from.
i was think about something like 

 const t = TweenMax.staggerTo(container.children, 4, {x:()=>`+=${Math.randomFrom(4,-8)}`,y:()=>`+=${Math.randomFrom(7,-10)}`, ease: Power1.easeInOut, repeat:-1, yoyo:true}, 0.2);

// this not work, but a kind of naming memory to easy search if the tween was destroyed in memory?
t.memoryName('blablaMemoryID'); // create a easy search reference for debug only 

Because i notice some memory leak from my events, and am trying to debug, but it hard to know what,where,when, from in a complex and deep events with a lots of tweenings features..
What your suggest to me , did you have good trick to learn me.


It will be very cool guys if you can release us a video to how debug memory for your tweens engines (tips tricks).

or maybe your already have one i didnt seen!
it could help to master the tween and the mistakes not to do, I'm sure I made a stupid mistake somewhere that causes me a memory leak.

sorry if this is a stupid question or not related to your engine :), hope you can help me here.
Also sorry for poor english, i try my best :)

Share this post


Link to post
Share on other sites
1 hour ago, jonForum said:

hey guys, did you have a cool trick to search a specific tween in memory ?

 

No. GSAP is just JavaScript, so the same rules apply to tweens as normal JavaScript objects.

https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/

 

You can clean up after yourself to limit memory leaks.

let tl = new TimelineMax().to(...)

...

tl.kill();
tl = null;

 

I do this for classes.

class Foo {
  constructor() {
    this.tl = new TimelineMax().to(...)
  }
  
  destroy() {
    this.tl.kill();
    this.tl = null;
  }
}

let foo = new Foo();

...

foo.destroy();
foo = null;

 

 

2 hours ago, jonForum said:

You know when your search current active objects in memory.

 

Using breakpoints is an easy way to see what's in memory.

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints/

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

I read these tutorials a long time ago, maybe I will have to read them again to refresh my mind.
I hoped to learn a new magic tricks here.


But from my workflow and search, i don't think i have memory leak about my engine.

the only issue with `this.tl.kill();`
it will kill all tweening active.
On my side i need take a look of specifiques tweens created in the streams.
And they are created inside many promises and inside `tl.addCallback(() => ...`, promises, and i also keep somes tweens alives insides.
 

But ref the timeLine in the class can be good , i will try to see if this can help! 
Am also pretty visual, if you know a good video tuto about this , i take!
Thanks again Blake, your awesome.

 

Edit: `the only issue with `this.tl.kill();`it will kill all tweening active.`
oups sorry forget me about this !lol

Share this post


Link to post
Share on other sites
1 minute ago, jonForum said:

the only issue with `this.tl.kill();`
it will kill all tweening active.

 

It only kills this.tl. 

 

4 minutes ago, jonForum said:

I hoped to learn a new magic tricks here.

 

Yeah, sorry. There is are no magic tricks when it comes to memory management. You just have to be mindful of what you're doing, and where you are creating references.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

In GSAP 3 you can assign an ID to a tween (or timeline) and use gsap.getById() to look it up. Not sure if that's helpful :) 

 

If you're really worried about garbage collection (the browser cleans up pretty well by itself) you can consider adding a default onComplete for your tweens that cleans up however you need. 

  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×