Question

So, I am fairly new to JavaScript coding, though not new to coding in general. When writing source code I generally have in mind the environment my code will run in (e.g. a virtual machine of some sort) – and with it the level of code optimization one can expect. (1)

In Java for example, I might write something like this,

Foo foo = FooFactory.getFoo(Bar.someStaticStuff("qux","gak",42);
blub.doSomethingImportantWithAFooObject(foo);

even if the foo object only used at this very location (thus introducing an needless variable declaration). Firstly it is my opinion that the code above is way better readable than the inlined version

blub.doSomethingImportantWithAFooObject(FooFactory.getFoo(Bar.someStaticStuff("qux","gak",42));

and secondly I know that Java compiler code optimization will take care of this anyway, i.e. the actual Java VM code will end up being inlined – so performance wise, there is no diffence between the two. (2)

Now to my actual Question:
What Level of Code Optimization can I expect in JavaScript in general?

I assume this depends on the JavaScript engine – but as my code will end up running in many different browsers lets just assume the worst and look at the worst case. Can I expect a moderate level of code optimization? What are some cases I still have to worry about?

---

(1) I do realize that finding good/the best algorithms and writing well organized code is more important and has a bigger impact on performance than a bit of code optimization. But that would be a different question.

(2) Now, I realize that the actual difference were there no optimization is small. But that is beside the point. There are easily features which are optimized quite efficiently, I was just kind of too lazy to write one down. Just imagine the above snippet inside a for loop which is called 100’000 times.

Answer 1

Don’t expect much on the optimization, there won’t be

• the tail-recursive optimization,
• loop unfolding,
• inline function
• etc

As javascript on client is not designed to do heavy CPU work, the optimization won’t make a huge difference.

There are some guidelines for writing hi-performance javascript code, most are minor and technics, like:

• Not use certain functions like eval(), arguments.callee and etc, which will prevent the js engine from generating hi-performance code.
• Use native features over hand writing ones, like don’t write your own containers, json parser etc.
• Use local variable instead of global ones.
• Never use for-each loop for array.
• Use parseInt() rather than Math.floor.
• AND stay away from jQuery.

All these technics are more like experience things, and may have some reasonable explanations behind. So you will have to spend some time search around or try jsPerf to help you decide which approach is better.

When you release the code, use closure compiler to take care of dead-branch and unnecessary-variable things, which will not boost up your performance a lot, but will make your code smaller.

Generally speaking, the final performance is highly depending on how well your code organized, how carefully your algorithm designed rather than how the optimizer performed.

---

Take your example above (by assuming FooFactory.getFoo() and Bar.someStaticStuff("qux","gak",42) is always returning the same result, and Bar, FooFactory are stateless, that someStaticStuff() and getFoo() won’t change anything.)

for (int i = 0; i < 10000000; i++)
  blub.doSomethingImportantWithAFooObject(
      FooFactory.getFoo(Bar.someStaticStuff("qux","gak",42));

Even the g++ with -O3 flag can’t make that code faster, for compiler can’t tell if Bar and FooFactory are stateless or not. So these kind of code should be avoided in any language.