function doStuff(){
  if(userAgent == "internetexplorer"){
    // ...
  }else if(userAgent == "firefox"){
    // ..
  }else if(userAgent == "webkit"){
    // ..
  }else if(userAgent == "opera"){
    // ..
  }else{
    // ..
  }
}

Each time the function is called the string comparisons have to be done, even if the value for userAgent will not change at all.

To optimize this situation assign the actual function code to a variable named doStuff:

 
if(userAgent == "internetexplorer"){
  doStuff = function(){ /* .. */ };
}else if(userAgent == "firefox"){
  doStuff = function(){ /* .. */ };
}else if(userAgent == "webkit"){
  doStuff = function(){ /* .. */ };
}else if(userAgent == "opera"){
  doStuff = function(){ /* .. */ };
}else{
  doStuff = function(){ /* .. */ };
}
 

After this no more string comparisons are needed. :-)

myElement.style.color = 'red';

Sometimes you will have to set a number of attribute values at once. For example if you have just created an element and can not assign a CSS class, because all attributes depend on specified conditions. In this case it is significant faster to set a value for the whole style attribute instead of setting each CSS attribute.

This five assignments

var myDiv = document.createElement('div');
myDiv.style.backgroundColor = 'blue';
myDiv.style.border = 'solid 4px red';
myDiv.style.fontFamily = 'Helvetica, Arial';
myDiv.style.width = '400px';
myDiv.style.height = '100px';
 

can be combined into one

var myDiv = document.createElement('div');
myDiv.setAttribute('style', 'background-color:blue;border:solid 4px red;font-family:Helvetica, Arial;width:400px;height:100px;');

If you are dealing with dynamically created elements, be sure to read part three of this series. ;-)

function test(){
  alert("this message will never be shown!");
  return true;
}
 
if( true || test() ){
  // ..
}
 
if( false && test() ){
 // ..
}

Since expressions are evaluated from left to right we have the following possibilities to optimize the expression order:

1. align less complex expressions left
2. for disjunctions: put the expression which will most likely be true to the left
3. for conjunctions: put the expression which will most likely be false to the left
4. group depending expressions

Of course the rules also apply to nested expressions.

This example

if(
  (
    (complexCalculation() < 42) &&
    (
      (userAgentVersion < 7) &&
      activexDisabled() &&
      (getUserAgent() == "Internet Explorer")
    )
  ) || (
    (value > 0)
  )
){
 // ..
}

can be optimized to

if(
  (value > 0) || (
    (
      (getUserAgent() == "Internet Explorer") &&
      (userAgentVersion < 7) &&
      activexDisabled()
    ) &&
    (complexCalculation() < 42)
  )
){
 // ..
}

var myString;
var myArray;
 
myString = 'lorem ';
myString += 'ipsum';
 
myArray = new Array();
myArray.push('foo');
myArray.push('bar');

You can also save a little amount of time by avoiding concating strings via the += operator.

var myString = 'lorem ipsum';
var myArray = ['foo', 'bar'];

Instead of

Initech.legalForm = 'corporation';
Initech.workEnvironment = 'cubeFarm';
Initech.coffee = 'lousy';

write

Initech = {
  legalForm : 'corporation',
  workEnvironment : 'cubeFarm',
  coffee : 'lousy'
};

So to improve this code snippet

var blockElement = document.createElement('div');
var paragraphElement = document.createElement('p');
var boldElement = document.createElement('b');
 
document.body.appendChild(blockElement);
 
blockElement.appendChild(paragraphElement);
blockElement.firstChild.appendChild(boldElement);
blockElement.firstChild.firstChild.innerHTML = 'test paragraph';
blockElement.className = 'myClass';

apply the newly created element at the end.

var blockElement = document.createElement('div');
var paragraphElement = document.createElement('p');
var boldElement = document.createElement('b');
 
blockElement.appendChild(paragraphElement);
blockElement.firstChild.appendChild(boldElement);
blockElement.firstChild.firstChild.innerHTML = 'test paragraph';
blockElement.className = 'myClass';
 
document.body.appendChild(blockElement);

If the style settings described in myClass are applied to blockElement's child nodes, they have to be rendered again — even if they were just added to the document.

So instead of

var myHandle = window.setTimeout("doStuff()", 100);

use

var myHandle = window.setTimeout(doStuff, 100);

Of course this hint is only useful if want to call a parameter less function — which should be no problem in connection with window.setTimeout() or window.setInterval(). ;-)

Update:
Actually, there is a way for having a function call with parameters. All we need is a wrapper function and a little bit closures magic:

function wrapperFunc(firstParam, secondParam){
  return (function(){
    doStuff(firstParam, secondParam);
  });
}
 
var myWrapper = wrapperFunc('foo', 'bar');
var myHandle = window.setTimeout(myWrapper, 100);

The real trick is that the myWrapper variable contains an anonymous function together with two variables, which were set when wrapperFunc() was called. By applying this variable to windows.setTimeout() method, the anonymous function (containing the call of doStuff()) will be executed after the given timeout.

Today's hint is: prevent lookups.
Every word in your object chain has to be found in the interpreter's lookup table. You can shorten the chain by using a local variable which holds a reference to your target.

So, instead of

for(i=0; i<100; i++){
  Initech.Web.Framework.WebsuiteObjects.Counter.increase(i);
}

write this:

var incr = Initech.Web.Framework.WebsuiteObjects.Counter.increase;
for(i=0; i<100; i++){
  incr(i);
}

If you are using DOM functions, the advantage of using a reference will be even greater.

Slow:

document.body.childNodes[8].firstChild.childNodes[3].nodeValue = 'foo';
document.body.childNodes[8].firstChild.childNodes[6].nodeValue = 'bar';
document.body.childNodes[8].firstChild.childNodes[8].nodeValue = '42';

Faster:

var elem = document.body.childNodes[8].firstChild;
elem.childNodes[3].nodeValue = 'foo';
elem.childNodes[6].nodeValue = 'bar';
elem.childNodes[8].nodeValue = '42';