Anonymous function performance - setTimeout

Question

According to Gregory Baker & Erik Arvidsson (Google), creating a named function and then passing that to setTimeout is actually faster than creating an anonymous function (reference: Optimizing JavaScript code -> Avoiding pitfalls with closures):

Creating a closure is significantly slower then creating an inner function without a closure, and much slower than reusing a static function. For example:

<snip>

    function alertMsg() {
      var msg = 'Message to alert';
      alert(msg);
    }

is slower than:

    function setupAlertTimeout() {
      window.setTimeout(alertMsg, 100);
    }

In my testing, there does not appear to be any significant difference (jsPerf here), so why do they claim that creating a whole named function is faster than simply making an anonymous function?

EDIT: note that I am specifically referring to the last two examples, the first one has been removed for clarity.

Answer 1

The theoretical difference comes from the fact the named function in your example is created at "compile" time.

But the real truth is that JavaScript engines are now very very good at creating and managing functions and scopes, which is arguably one of the most critical topic with today's coding style, so the overhead is generally totally insignificant.

In my opinion, this particular advice creates more harm (over optimized code) than good today. I see it as obsolete.

Answer 2

The difference in Chrome, FF, IE10:

UserAgent           closure     nonclosure  static       # Tests 
Chrome 25.0.1364    55,885,835  86,105,613  587,742,003  1
Firefox 19.0        31,856,561  67,442,015  863,300,987  1
IE 10.0             10,430,542  18,945,667  485,135,189  1

In IE10 and Firefox, non-closure runs twice as fast and in Chrome almost twice as fast. Referencing a static function is an order of magnitude faster than either.

closure is defined as calling createClosure():

function createClosure() {
    var a = 'hi';
    return function() {
        alert(a);
    };
}

nonclosure is defined as calling createNonClosure():

function createNonClosure() {
    return function() {
        alert('hi');
    };
}

static is just referencing a static function, does not matter if it's named or not.

I am also pretty sure that closure gets slower when the environment being closed over gets bigger.

Here's the jsperf http://jsperf.com/closure-no-closure

Answer 3

There is a significant difference in performance between your examples, but due to the speed of current JavaScript parsers, the difference isn't noticeable unless you're doing the call millions of times.

Therefore, this technique would be considered a micro-optimization, much like the technique of scoping variables to reduce prototype-chain lookups. It may not make a difference if you do it 10 times in your jQuery event handlers, but it will make a significant and important difference when developing JavaScript Rendering Engines or when performing expensive operations on CPU-constrained systems.

Please check out the updated jsperf test at http://jsperf.com/closure-no-closure/2.