I have a Container with multiple Sprite and MovieClip objects displayed on the Stage, where all the sprites use a 3MB png SpriteSheet.
At some point I load another SpriteSheet in order to display a different Containerwhich uses it.
Along the process of trial and error, I've seen that setting the visible property of the Container isn't enough, so i used removeChild(), and also cache(), both of which helped a proper framerate.
The problem is that as I load more containers and spritesheets, the framerate occasionally gets very low.
Are there any other steps I should take in order to release used resources?
What are the common pitfalls?
Yes, I had quite a bit of performance problems myself, when I first started creating applications in createJS.
If your frame rate is lower than it should be, then make sure to cache every object that isn't created from a Bitmap, since those are not refreshed constantly and don't consume performance. For example, Shape type objects are refreshed constantly and are very performance intensive.
You should use the following pattern for the objects that don't have animated content:
var bounds = displayObject.nominalBounds;
displayObject.cache(bounds.x, bounds.y, bounds.width, bounds.height);
This will cache the object and make it consume almost no performance. Also, when it is time to get rid of it, make sure to displose of the assets using something like:
//if it was added as a child of a container
displayObject.parent.removeChild(displayObject);
//if it was cached prior
displayObject.uncache();
//when you don't need it anymore, for garbage collection
displayObject = null;