I have a large array of kineticjs rects which I am using to render to screen. Each rect has a unique size and has a click event attached to it. The thing is, I only need maybe 10% of the rectangles to render on screen at anyone point. If I call this.hide() on 90% of the rectangles, will it free up resources for my web app? Or will something still run in the background for all these rectangles?
If this does not work is there any way of accomplishing this using another kineticjs trick?
All rectangles will still be objects and will still consume resources.
If resources are critical, you could "recycle" your rectangles:
Create a smaller quantity of rectangle objects (maybe 15% of your current total rect count). Put those rectangle objects in an array. Initially, make all the rectangles hidden.
As a rectangle is needed, iterate the rectangles array and find any hidden rectangle. Reset its properties to match a desired rectangle and make it visible.
As a rectangle is no longer needed, make it hidden.