Javascript acceleration?

Question

Is there any way to speed up JS scripts (i mean some complex DOM manipulations, like games or animations)?

Answer 1

Theres really no way to really speed it up. You can compact it but it won't be much faster.

Answer 2

Use the V8 javascript engine? :P

The only way you can do that is to reduce the amount of dom and scope access in your code. e.g. when accessing an element in the dom multiple times, instead of

document.something.mydiv.myelement.property1 = this
document.something.mydiv.myelement.property2 = bla
document.something.mydiv.myelement.property3 = foo
document.something.mydiv.myelement.property4 = bar

do

var myel = document.something.mydiv.myelement
myel.property1 = this
myel.property2 = bla
myel.property4 = bar
myel.property3 = foo

Note that some javascript engines will automatically make this optimization for you, but for older browsers, the latter will definitely be faster than the former because it only has to go through the access chain once to reach myel

Have a look at this video for more javascript optmization techniques http://www.youtube.com/watch?v=mHtdZgou0qU

Answer 3

If you mean outside the browser then you should use the fastest around, i.e. Chrome's V8 Java Script engine.

Inside the browser there is a wealth of optimization techniques to faster loading Java Script, here is a good place for optimization techniques by google.

• Compile your Java Script using a tool like YUI compressor than serve it gzipped.
• Only load the bare minimum you need
• Complex animations are still best served by Rich UI plugins, i.e. Flash/Silverlight

For animations look at using the HTML 5 Canvas element for browsers that support it, fall back to flash for ones that don't.

Google maps is a good case of what's possible with pure Java Script although they've spent a wealth resources optimizing the performance for each browser. As always the best way to improve your speed is to benchmark different approaches. e.g. div.innerHTML ="", is most of the times quicker than using the DOM to dynamically add elements, etc.

Answer 4

That's a very vague question. There are a million things you can do to speed up your code (Ajaxian has 157 articles on the topic at the time of this writing), but there is no "Make Me Faster" button that magically makes all scripts run faster. If there were, life would be so much easier.

Answer 5

The closure project from Google makes some claims along those lines, although I haven't tried it personally.

The Closure Compiler compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewrites and minimizes what's left so that it downloads and runs quickly. It also also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

Answer 6

Try to make animation and display changes to positioned or 'offscreen' elements- redraw the page the fewest number of times.

Make multiple style changes by changing the cssText or the className, not one property at a time.

If you need to lookup an element or property twice in the same process, you should have made a local reference the first time.

And remember to turn off the debugger, if you are not debugging.

Answer 7

The best you can do is optimize your code. Use a profiler -- for Firefox there's Firebug, Safari and Windows IE 8 have JavaScript debuggers and profilers built in (At least I believe IE 8 does, someone correct me if I'm wrong...). Running a profile on your code will show you where the slowest parts are, and those are the sections you can focus on optimizing... perhaps with more questions that are a lot more specific.