JavaScript Speed Enhancements

Programmers should strive to make their code run fast when possible. The exact same result in JavaScript can take vastly different amounts of time when achieved by different means. In order to help out JavaScript programmers everywhere, I have set up this demo page. You will see different versions of code and the amount of time each one takes. These times are calculated live by your browser. A quick pass will calculate really rough numbers, then they will be updated by a second loop that takes longer and calculates a somewhat more accurate average.

One key aspect of this page that will likely set it apart from others along the same vein is that this one is actually performing the good and bad versions of the code and will give you the live results of the tests as they are performed.

Dereferencing

If you are looking at document.my_form.some_input_element.value often, it will be best to store the value to a local variable. This tip was given to me by a reader of my Huffman JavaScript Compression page. He said that my code would be sped up by a factor of 10 when I made this change. He was right. This particular example is similar and you can obviously tell that using a local variable is far more efficient.

for (var i = 0; i < 100; i ++) {
    a = document.testform.testtext.value;
    b = document.testform.testtext.value.length;
    c = document.testform.testtext.value.substr(2, 1);
}
No results yet
v = document.testform.testtext.value;
for (var i = 0; i < 100; i ++) {
    a = v;
    b = v.length;
    c = v.substr(2, 1);
}
No results yet
BrowserOperating SystemResult
Firefox 2.0.0.1Windows XP5x faster
Internet Explorer 7Windows XP5x to 25x faster
Opera 9.10Windows XP6x faster

Internet Explorer usually provided me with a 20-25x speed increase, but sometimes it plummetted down to a mere 4 or 5x speed increase. No matter what, it is clear that it is far faster to use a local variable.

String Concatenation

One other tip that I get a lot is that I should avoid lots of little string concatenations. I also read that string concatenations get worse with the size of the string being concatenated. Instead, the little substrings should be placed into an array and then joined together to make one big string in the end.

a = '';
b = 'abcdefghijklmnopqrstuvwxyz';
b += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
for (var i = 0; i < 500; i ++) {
    a += b + b + b + b + b;
}
No results yet
a = new Array();
b = 'abcdefghijklmnopqrstuvwxyz';
b += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
for (var i = 0; i < 500; i ++) {
    a.push(b);
    a.push(b);
    a.push(b);
    a.push(b);
    a.push(b);
}
a = a.join('');
No results yet
BrowserOperating SystemResult
Firefox 2.0.0.1Windows XPQuestionable
Internet Explorer 7Windows XP6x faster
Opera 9.10Windows XP2x faster

You will notice that FireFox says "Questionable" for the speed increase. For littler string concatenations, it is actually slower to put the strings into an array and concatenate them. For larger strings, the speed savings are negligable.

Additional Resources

  1. Efficient JavaScript - Tips from the developers of Opera on how to write good code.
  2. Javascript String Concatenation - Shows how string concatenation is slow and using join() can save you lots of time.
Server Status: Upgrade went relatively well, but I had issues with the IP & DNS changes. Would you like to know more?

For all of you experiencing a 502 error when downloading files to your phone, could you send me a detailed report (phone model, provider, exact error message, type of file you are sending)? I believe that the problem is due to my recent IP change and that it will clear up in a couple days, but I'd rather start collecting information a little earlier in case I need it.
Tyler Akins <>
Chat - Contact Me - Legal Info
Worker bees are female.