JavaScript Optimization Theory--Part 1 of Chapter 10 from Speed Up Your Site (3/5)--WebReference.com

Minimize DOM Interaction and I/O

Interacting with the DOM is significantly more complicated than arithmetic
computations, which makes it slower. When the JavaScript interpreter encounters
a scoped object, the engine resolves the reference by looking up the first
object in the chain and working its way through the next object until
it finds the referenced property. To maximize object resolution speed,
minimize the scope chain of objects. Each node reference within an element's
scope chain means more lookups for the browser. Keep in mind that there
are exceptions, like the window object, which is faster to fully reference.
So instead of this:

var link = location.href;

Do this:

var link = window.location.href;

Minimize Object and Property Lookups

Object-oriented techniques encourage encapsulation by tacking sub-nodes
and methods onto objects. However, object-property lookups are slow, especially
if there is an evaluation. So instead of this:

for(var i = 0; i < 1000; i++)
a.b.c.d(i);

Do this:

var e = a.b.c.d;
for(var i = 0; i < 1000; i++)
e(i);

Reduce the number of dots (object.property) and brackets (object["property"])
in your program by caching frequently used objects and properties. Nested
properties are the worst offenders (object.property.property.property).

Here is an example of minimizing lookups in a loop. Instead of this:

for (i=0; i<someArrayOrObject.length; i++)

Do this:

for (i=0, var n=someArrayOrObject.length; i<n; i++)

Also, accessing a named property or object requires a lookup. When possible,
refer to the object or property directly by using an index into an object
array. So instead of this:

var form = document.f2; // refer to form by name

Do this:

var form = document.forms[1]; // refer to form by position

Shorten Scope Chains

Every time a function executes, JavaScript creates an execution context
that defines its own little world for local variables. Each execution
context has an associated scope chain object that defines the object's
place in the document's hierarchy. The scope chain lists the objects
within the global namespace that are searched when evaluating an object
or property. Each time a JavaScript program begins executing, certain
built-in objects are created.

The global object lists the properties (global variables) and
predefined values and functions (Math, parseInt(), etc.)
that are available to all JavaScript programs.

Each time a function executes, a temporary call object is created.
The function's arguments and variables are stored as properties of
its call object. Local variables are properties of the call object.

Within each call object is the calling scope. Each set of brackets
recursively defines a new child of that scope. When JavaScript looks up
a variable (called variable name resolution), the JavaScript interpreter
looks first in the local scope, then in its parent, then in the parent
of that scope, and so on until it hits the global scope. In other words,
JavaScript looks at the first item in the scope chain, and if it doesn't
find the variable, it bubbles up the chain until it hits the global object.

That's why global scopes are slow. They are worst-case scenarios
for object lookups.

During execution, only with statements and catch clauses
affect the scope chain.

Avoid with Statements - The with statement extends
the scope chain temporarily with a computed object, executes a statement
with this longer scope chain, and then restores the original scope chain.
This can save you typing time, but cost you execution time. Each additional
child node you refer to means more work for the browser in scanning
the global namespace of your document. So instead of this: