Transpiled JavaScript Performance

A really interesting discussion almost happened between Kyle Simpson and John-David Dalton at Forward JS.

John mentioned that most browsers deoptimize your functions if they contain a try-catch. Kyle had mentioned earlier that catch blocks are the only way to have block scope in JS and so transpilers like Google's Traceur use them to backport ES6's let keyword.

So that begs the question

Is Google turning your code into something it refuses to optimize?

ES6 Block Scope

Coming with ECMAScript 6, you'll be able to get block scope like this:

{
    let a = 2;
    console.log(a); // 2
}

console.log(a); // undefined

Block Scope with Traceur

Traceur allows you to use this block scoping technique today by turning your code into try-catch blocks under the hood.

Check out the Traceur Transcoding Demo for yourself! Just remember to turn on the option for experimental.

If you try the code shown above, you'll see this result in the right pane.

Traceur try-catch

JS Perf with Try-Catch

The second piece of this puzzle comes to us from Kevin Gadd in the form of a JS Perf.

On this page you can plainly see that adding a try-catch reduces operations per second from 90K to 20K in a simple add example.

Is There Something We're Missing?

Perhaps something else is happening behind the scenes?

It seems as though Traceur's compilation of this feature can really wreak havok on the performance of your code.

© 2014 Jon Kuperman