Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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.

share|improve this question
    
I think this whole discussion (the question and its answers) should be backed with data from some real benchmarks. Otherwise it is difficult to judge if the provided information is correct. –  Giorgio Mar 28 '13 at 10:18
add comment

3 Answers

up vote 4 down vote accepted

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.