1

I have used JSperf to test a small sample of code.

enter image description here

According to a few articles I came across, both should have similar performance with test2 having a little edge. But here it's the complete opposite. Can someone explain why the huge difference?

Edit : I also understand the differences between both of them. Please don't mark this as a duplicate of this or other questions which talk about the semantic differences and do not answer my question regarding performance.

Thank you.

Community
  • 1
  • 1
Pardha.Saradhi
  • 418
  • 9
  • 25
  • How about linking us to the actual test case? – Cerbrus May 17 '17 at 11:28
  • @Cerbrus added the test link – Pardha.Saradhi May 17 '17 at 11:31
  • whoever downvoted, can you please give the reason for that? will help in asking better questions – Pardha.Saradhi May 17 '17 at 11:32
  • 3
    Possible duplicate of [Javascript: performance of var functionName = function() {} vs function functionName() {}](http://stackoverflow.com/questions/4751178/javascript-performance-of-var-functionname-function-vs-function-function) – Rajesh May 17 '17 at 12:08
  • You can also refer this: http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname for their differene – Rajesh May 17 '17 at 12:09
  • 1
    @Rajesh those questions say the same. There shouldn't be any difference. But here I am showing the difference. I don't understand how my question is a duplicate of that. – Pardha.Saradhi May 17 '17 at 13:02

2 Answers2

2

With the powerful optimizations JavaScript engines are using these days, Micro-benchmarks like this produce somewhat misleading results. For example, I'm guessing what you were trying to measure is function call overhead. But it looks like the way your code is written, you may be (re)defining the function definition and/or symbol lookup once for every 10 times you execute it; I'm guessing that wasn't the intent.

In this alternative test, I've arranged things to avoid repeated definition of the function, and added a few other ways of invoking the functions. This reduces the difference in performance to something I'd consider dominated by experimental noise. While this there may sometimes be apparent differences but I wouldn't consider them statistically significant given the experimental error levels. In other words, it reduces the contest to a virtual tie.

Even in browsers where there's a consistent difference between approaches, caching the function in a local variable seems to minimize the difference between definition and expression.

Burt_Harris
  • 5,336
  • 1
  • 24
  • 55
2

I also understand the differences between both of them.

Do you also understand these semantic differences?

Notice that jsPerf puts your code inside a tight loop whose execution time is measured. The function declaration requires the creation of a block scope for each iteration, which slows the test down considerably. That is hardly what you were trying to measure.

Community
  • 1
  • 1
Bergi
  • 513,640
  • 108
  • 821
  • 1,164
  • Agreed. For the same reasons, the apparent differences *between* engines are far greater in microbenchmarks than real-world use cases are. A factor of 1,000 difference in jsPerf measurments doesn't necessarily imply anything significant to typical applications. – Burt_Harris May 17 '17 at 22:42
  • @Bergi What do you mean with 'The function declaration *requires* the creation of a block scope'? Doesn't each loop introduce its own block scope anyway? Or do you mean that the block scope holding no declarations is 'empty' and can be optimized away? – le_m May 17 '17 at 23:14
  • @ie_m, I doubt the block scope can be optimized away as written, it contains the function definition of the function being called. – Burt_Harris May 17 '17 at 23:16
  • @Burt_Harris Just edited the comment above; I was referring to the loop body with only var declarations as the 'empty' scope. My issue with understanding Bergi's answer is the term 'requires' - my understanding of scoping is rather superficial so I would be happy to learn more. – le_m May 17 '17 at 23:18
  • 2
    @le_m Yes, when there are no `let` or `const` or `function` declarations in the loop body that would be placed in the scope, it won't be created. That's the reason why loops with block-scoped variables are [running slower](http://stackoverflow.com/q/43847863/1048572) than loops without (or function-scoped `var`s) - at least in current engines. – Bergi May 17 '17 at 23:21
  • Ah, I thought because of the weird rules for JavaScript variables, not every pair of braces really creates a block scope. Scoping is at the level of functions, contrary to other languages. – Burt_Harris May 17 '17 at 23:22