javascriptdom-eventskineticjs

KineticJS - Performance Impact of Kinetic.Node.listening()


Recently, I learned that I can use the listening() method to determine whether or not a KineticJS node is listening for events. I made a game that has several hundred shapes visible at any given time. Many of those shapes do not need to be listening for events, so I have considered disabling that functionality. Could someone with experience in that area explain the potential performance impact of disabling events so that I can evaluate whether or not it would be worth incorporating in my project?


Solution

  • Good

    Since you have a relatively large count of objects on the stage, you will likely gain performance by setting node.listening(false) for nodes that don't need to respond to events. Any mouse event on the stage will trigger a call to all listening objects -- in your case, hundreds of calls per event. The reason (somewhat obvious) for performance gain is that fewer object event handlers must be called per event.

    Better

    For even better performance, you might look into the Kinetic.FastLayer. Think of the FastLayer as a container for all your objects that don't current need event handlers. The FastLayer is rendered very quickly because there is no eventing overhead. When one of your objects needs to use eventing, you can move them to a regular Kinetic.Layer where eventing is again triggered.

    Best

    The best performance is had by turning a set of currently immobile objects into a static image (caching). That way that set of objects can be blitted from the image to the canvas very quickly. And again, if one of the cached objects needs to use eventing, you can move them to a regular Kinetic.Layer and re-cache the remaining set of objects into a new image.

    Of course, your design will determine whether the above performance techniques can be applied to your game.

    Good luck with your project!