Efficient JavaScript

Traditionally, a Web page would not contain much scripting, or at least, not much that would affect the performance of that Web page. However, as Web pages become more like applications, the performance of scripts is having a bigger effect. With more and more applications being developed using Web technologies, improving the performance of scripts is becoming increasingly important.

With a desktop application, a compiler is normally used to convert the source into the final binary. The compiler can take its time, and optimize as much as possible for good performance of the final application. Web applications do not have that luxury. Since they need to run on multiple browsers, platforms, and architectures, they cannot be completely precompiled. The browser has to do the interpretation and compilation each time it retrieves a script, and yet the final application has to run as smoothly as a desktop application, and load quickly as well. It is expected to run on a large variety of devices, from an ordinary desktop computer, to a mobile phone.

Browsers are fairly good at achieving this, and Opera has one of the fastest scripting engines of any current browser. However, browsers do have their limits, and that is where the Web developer has to take over. Ensuring that a Web application runs as fast as possible can be a simple matter of trading one type of loop for another, making one combined style change instead of three, or adding only the script that will actually be used.

This article will show several simple changes that can be made to improve the performance of your Web applications. Areas covered will be ECMAScript - the core language used by JavaScript, DOM, and document loading.

ECMAScript

1. Avoid using eval or the Function constructor
   1. Rewrite that eval
   2. If you want a function, use a function
2. Avoid using with
3. Don't use try-catch-finally inside performance-critical functions
4. Isolate uses of eval and with
5. Avoid using global variables
6. Beware of implicit object conversion
7. Avoid for-in in performance-critical functions
8. Use strings accumulator-style
9. Primitive operations can be faster than function calls
10. Pass functions, not strings, to setTimeout() and setInterval()

DOM

1. Repaint and reflow
   1. Keeping the number of reflows to a minimum
   2. Minimal reflow
2. Document tree modification
3. Modifying an invisible element
4. Taking measurements
5. Making several style changes at once
6. Trading smoothness for speed
7. Avoid inspecting large numbers of nodes
8. Improve speed with XPath
9. Avoid modifications while traversing the DOM
10. Cache DOM values in script variables

Document loading

1. Avoid keeping alive references from one document to another
2. Fast history navigation
3. Use XMLHttpRequest
4. Create SCRIPT elements dynamically
5. location.replace() keeps the history under control

http://dev.opera.com/articles/view/efficient-javascript