mrspoonzy at gmail Cube by Noah Ellman A powerful javascript toolkit, in research © by Noah Ellman

Jwee's Tween Engine VERSUS MooTools'

So, we've been saying that jwee's animation engine is the smoothest and most effecient animation framework around. But really, what do we know? Well, let's run some benchmarks and get to the bottom of this claim.

For this benchmark, we are going to use the mosquito swarm example. We realize that the mosquito is not so much a reality test, however, it is a burn test. It will quickly unveal any not-so-effecient algorithms, and any potential long-term memory leaks will manifest themselves in your gradually deterioating browser performance.

MooTools'in It Up For Reals

So, we need to port the mosquito swarm into MooTools API. This means I am going to have to learn MooTools API.

I have never actually used the MooTools framework for reals before, so this will be interesing. Judging from a glance through Moo's API Docs, it looks pretty easy and elegant as advertised. MooTools is most definately a decent framework in that respect. Also, many classes and methods were almost identical to jwee's, so I thought it was going to be just a search and replace kinda thing. However, maybe not. . .

  • In Jwee, we can check to the status of a tween by checking the tween.running boolean on the tween instance. How do yoo doo this in moo? After searching around, the only way to know the tween's status is to create an onComplete event handler and then change some flag variable yourself to keep track.

  • The mosquitos are always flying at different speeds. This means every tween.start needs a different duration. Moo won't let you set duration in start, so I had to write 2 lines of code for that. Also, I beleive changing duration in Moo causes the tween class to destruct and recreate.

  • I found the inject() method of elements quite confusing at first, because the logic is backwords from that of appendChild(). Instead of the parent appending a new child, the new child is injecting itself into the parent. Interesting.

Now, I'm certainly not dissing Moo. Moo just has a different approach to things. Moo's codebase is pretty easy to read for the experienced javascripter. The class inheritence, with Fx.Tween inheriting Fx and Fx.CSS in quite nifty. However, this approach sacrafices performance for nice-looking code. This is a negative in my opinion, especially when dealing with animation which has to be critically fast.

The Test

While the scripts are running, notice the CPU / memory usage of your browser, either with the Chrome debugger or windows task manager.


Mosquito Swarm






My Results And Conclusion

Firefox

CPU: In the above test, my Firefox showed an average of 15-20% cpu usage on the Jwee powered mosquitos, and 25-30% cpu usage on MooTools powered mosquitos. Mootools ate up double the power.

Memory: In the above test, my Firefox memory usage increased by 1-2MB per second while running Jwee powered mosquitos. After about 30 seconds Firefox ran a internal garbage collection, and freed the memory back to original. While running Moo powered mosquitos, Firefox used ate an additional 10 MB memory per second! After only a few seconds, Firefox ran the garbage collection, and again and again. Mootools requied 5x the amount of memory allocation per second.

Internet Explorer
CPU: Jwee powered mosquitos were completely smooth, and IE used 20% cpu. Mootool powered mosquitos however were a complete failure. IE was completely overwhelmed, the mosquitos moved around at about 1 frame per second, completely non-functional. This is the SAME test, doing the same thing, with two different coding implementations, and one worked and one completely failed. The dramatic results here surprised me.

Memory: IE 8.0 must have different garbage collection algorthms, because memory usage was not noticably increasing except by a few bytes per second.

These are resources that are needed to scroll the page, execute ajax requests, process mouse rollovers, and not to mention, animate other animations that you would want to be smooth. And who knows what else the user is running in other windows at the this time. Pherhaps there is other software running behind the browser that is using 75% cpu, which would mean, your javascript suddenly does not have the resources it requires to process smoothly. This will result in your visitor interpreting your site as sluggish - a reputation that is hard to break.

Now, this test was was not completely based on real-life circumstances... I mean who would have 100 flying animated mosquitos with individual personalities and levels of intoxication on their website. However, the mosquitos were animated on a plain white opaque background. If you added png images in the background, styled within multiple layers of DIVs with complicated stylesheet classes, that could easily multiply the the amount of cpu usage required per mosquito by 10x. Every thing adds up. As your website gets fancy, you will be adding more event handlers, more timeouts, more ajax calls, and more special affects. The result is what is known as graceful degedation, which is just that.


Discussion on /blog-mootools-tween-versus-jwee