memory leak [easejs cache]

[DivisionBoy]

When I use a tween, there is a constant memory leak, until the application is stopped.

Performance also falls.

This is due to the "cache". 

shape.cache(-0.1, -0.1, width, height);

 

Here is my simple code, maybe I have something wrong?

 

window.onload = function() {
	var canvas = document.getElementById("canvas"), stage = new createjs.Stage(canvas);

	function createShape(radius, width, height, color){
		var shape = new createjs.Shape(), g = shape.graphics;
		stage.addChild(shape);
		g.beginFill(color);
		radius > 0 ? g.drawCircle(0, 0, radius) : g.drawRect(0,0, width, height);
		g.endFill();
		shape.setTransform((width/2),height/2,1,1,0,0,0,width/2,height/2);
		shape.cache(-0.1, -0.1, width, height);
		return shape;
	}

	var Layer_1 = createShape(0,556,409,"#b8aa51");
	Layer_1.x = 275;
	Layer_1.y = 198.5;
		
	var main = new TimelineMax( { onComplete: again } );
	main.set(Layer_1, {x:275, y:198.5, scaleX:1, scaleY:1, rotation:0, alpha:1, easel:{tint:"#000000", tintAmount:1} } );
		
	var Layer_1_tl = new TimelineMax(); 
	main.add(Layer_1_tl, 0);
		
	Layer_1_tl.to(Layer_1,0.9, { easel:{tint:"#e13a3a", tintAmount:1}, ease:Linear.easeNone  } );
	Layer_1_tl.to(Layer_1,1.1, { easel:{tint:"#75b851", tintAmount:1}, ease:Linear.easeNone  } );
	Layer_1_tl.to(Layer_1,1.1, { easel:{tint:"#b8aa51", tintAmount:1}, ease:Linear.easeNone  } );
	
        TweenLite.ticker.addEventListener("tick", stage.update, stage);
	stage.update();
	function again() {main.restart()}
}

 

 

[Jonathan]

Hello DivisionBoy, and Welcome to the GreenSock Forum!

 

Could you please provide a limited code example in codepen?

 

This way we can better help you by seeing your code in a live editable environment?

 

This way we can see if this is a EaselJS issue or a GSAP issue!

 

Also can you be more specific?

• Is this on Desktop or Mobile device?
• Like what OS and version you seeing this on?
• What browser and browser version you seeing this on?

Any additional info will be highly appreciated, thank you!

 

 

And this may help as well.. GSAP lagSmoothing()

 

 

[DivisionBoy]

desktop

windows 8

chrome 50

 

I guess it kind of depends precisely on GSAP. Because if you comment out the tweens, then there is no memory leak.

With tweens in my Task Manager, the memory is loaded under 90% (!)

 

See the Pen bpQomR by DivisionBoy (@DivisionBoy) on CodePen

[Carl]

Keep in mind that Easel filters can be quite processor intensive.

Please monitor the performance of this demo:

http://www.cs.vu.nl/~eliens/demo/mobile-graphic-easel-examples-Filters-simple.htm

 

What are your results?

 

 

Here is your demo with a smaller shape

http://s.codepen.io/GreenSock/debug/KzryMG

 

Better? 

 

I'm quite sure that this is just a case of the larger the shape, the more pixels there are to transform and update. 

 

Keep in mind that GSAP only animates numeric values. It isn't internally storing anything that would use more memory over time. 

 

As a final test I would encourage you to create a similar demo using a basic requestAnimationFrame loop or TweenJS (no GSAP) to see if GSAP truly is the cause.

[DivisionBoy]

If the shape a smaller, then everything is fine!

But how then to be, if you need a specific size shape?

[Carl]

You might do better cross-fading one rectangle to another. So put a blue rectangle on top of a red one and fade the blue one to opacity 0 (or alpha).

I'd encourage you also to post in the EaselJS support channels as they know much more about it than I do. FWIW we hear lots of reports of people having great success with Easel and GSAP (especially via Animate CC output). In this case I think the filters are just a extra heavy to animate, but again, I'm not an expert here.

[DivisionBoy]

ok, thanks

[Jonathan]

I don't know if this helps but Windows 8 has had many issues with high CPU and memory leak issues.

 

You might have to adjust Windows 8 system page file system allocation and make sure it is set to auto.

 

In Windows 8 go to:

 

Control Panel -> System -> Advanced System Settings -> Advanced Tab (for me it defaults on this tab)

 

-> Settings... (under the "Performance" section)

-> Advanced Tab

-> under "Virtual Memory" click Change...

-> Make sure "Automatically manage paging file size for all drives" is checked.

 

Also some have also reported this memory leak in windows 8 happening with AMD card as well. So if you have an AMD video card on Windows 8.. update the driver.

 

But most users report making sure you have the right Page File System in Windows 8 to prevent this memory leak.

 

[DivisionBoy]

Sorry, I forgot to specify that I tested it on a special weak computer.

System:

Processor: Intel Core 1.86 GHz

RAM: 3.25 GB

 

On my work computer, there is no problem.

But the problem is that the customers are very demanding on the performance, as their resources sometimes simultaneously, on a single page, located at 5-10 advertisers.