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 |
| Browser | Operating System | Result |
|---|
| Browser | Android RC30 | 6x faster |
| Chrome 1.0.154.43 | Windows XP | 4x faster |
| Firefox 2.0.0.1 | Windows XP | 5x faster |
| Firefox 3.0.5 | Linux (Ubuntu 8.10) | 2x to 3x faster |
| Firefox 3.0.5 | Windows | 5x faster |
| Firefox 3.5 | Linux (Ubuntu 9.04) | 7x to 8x faster |
| Internet Explorer 7 | Windows XP | 5x to 25x faster |
| Midori 0.1.2 | Linux (Ubuntu 9.04) | 2x faster |
| Opera 9.10 | Windows XP | 6x faster |
| Safari 4.0 Beta | Mac OS X | 7x 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 |
| Browser | Operating System | Result |
|---|
| Browser | Android RC30 | Equal |
| Chrome 1.0.154.43 | Windows XP | 2x slower |
| Firefox 2.0.0.1 | Windows XP | Questionable |
| Firefox 3.0.5 | Linux (Ubuntu 8.10) | Questionable |
| Firefox 3.0.5 | Windows | Questionable |
| Firefox 3.5 | Linux (Ubuntu 9.04) | 2x slower |
| Internet Explorer 7 | Windows XP | 4x to 7x faster |
| Midori 0.1.2 | Linux (Ubuntu 9.04) | 4x to 5x faster |
| Opera 9.10 | Windows XP | 2x faster |
| Safari 4.0 Beta | Mac OS X | 1.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.