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
BrowserAndroid RC306x faster
Chrome 1.0.154.43Windows XP4x faster
Firefox 2.0.0.1Windows XP5x faster
Firefox 3.0.5Linux (Ubuntu 8.10)2x to 3x faster
Firefox 3.0.5Windows5x faster
Firefox 3.5Linux (Ubuntu 9.04)7x to 8x faster
Internet Explorer 7Windows XP5x to 25x faster
Midori 0.1.2Linux (Ubuntu 9.04)2x faster
Opera 9.10Windows XP6x faster
Safari 4.0 BetaMac OS X7x 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
BrowserAndroid RC30Equal
Chrome 1.0.154.43Windows XP2x slower
Firefox 2.0.0.1Windows XPQuestionable
Firefox 3.0.5Linux (Ubuntu 8.10)Questionable
Firefox 3.0.5WindowsQuestionable
Firefox 3.5Linux (Ubuntu 9.04)2x slower
Internet Explorer 7Windows XP4x to 7x faster
Midori 0.1.2Linux (Ubuntu 9.04)4x to 5x faster
Opera 9.10Windows XP2x faster
Safari 4.0 BetaMac OS X1.8x 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.

Chrome's JavaScript engine makes the array building and concatenation actually slower than just appending to a string repeatedly.

To help combat this problem, I have started working on a cross-browser library to improve the speed of these comparisons, browser_faster.js.

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.
Hawaii has no daylight savings time. It makes sense though, since it is so close to the equator and days are about the same all year round. Tyler Akins! <>
Contact Me - Legal Info