Who’s Faster: Function or Object

A little while ago, I wrote about a simple animation package I was working on. I made the following wondrous claim:

You may have been wondering why the animation functions are structured like they are. All animation functions follow the same structure:

function AnimationType(curve, <other arguments>) {
    function animate(t) {
        //  do something clever
    }
    animator.setup = function() {
        //  set up the arguments for animation
    }
    animator.finish = function(pos) {
        //  finalise the animation, reset nodes to their original states
        //  when 0==pos or their final states when 1==pos.
    }

    return animator;
}

Why didn’t I use real JavaScript objects instead of returning a whacky function that has other functions attached to it? It’s all about performance.

Remember back in the animator function how we call the animate method returned from the factory function: fn(t). If we’d returned an object from the factory instead of a function, this call would have looked like the following instead: animate.run(t). The problem is this would have required an additional property look up before calling the function. Of course, I could have pulled out the run function and called it via its call method. But why? The animate functions don’t have any state. Why should they be objects.

Of course, being bad nerd, I didn’t back this claim up with any proof. Just today I happened to be rethinking this assertion, not because I thought I was wrong (just ask my wife, I never think I’m wrong), but because I was wondering just how much slower using objects might be.

As the framework has grown, it becomes more and more clear that using an object to specify the animation might make things more flexible. This would probably require some sort of pre-processing of the animation sequence, but that’s not too much overhead. So just how much slower is calling a method on an object than calling a function directly?

Browser Direct Function Object Method
Safari 3 135ms 134ms
Firefox 2 555ms 361ms
Firefox 1.5 561ms 366ms
Internet Explorer 6 321ms 273ms
Internet Explorer 7 350ms 291ms

This is pretty much the exact opposite of what I was expecting. Just take a look at the numbers:

timing.png

That’s just crazy. I never would have thought that calling a method would outperform calling a function directly. If anyone has any ideas why this might be the case, I’d love to know.

(Note: I’ll upload my test file shortly.)