Speed Test

A discussion about alternative ways to populate an array with numbers corresponding to their positions in an array led to my deciding to actually test the two alternatives in order to find out the point at which the less obvious code which offloads more of the work onto the browser becomes faster than using a straightforward loop in JavaScript itself. I had realised that the alternative code would be faster than a loop for large arrays but I hadn't realised just how small a large array could be in this case.

To start with here are the two alternatives that we are discussing in this particular case.

Array.prototype.populate1 = function(n) {
return Object.keys(Object(0+Array(n)));
};
Array.prototype.populate2 = function(n) {
for(var a=[], i=0; i < n; i++) {a[i] = i;}
return a;
};

I have added 1 and 2 to the end of the method names to allow them to both be called from the same speed test.

The next thing I did was to build a script specifically for running speed tests to compare JavaScript. Since running a single instance of code is going to be very quick, we need to run it multiple times to get a measurable result. Since the loop to run the code multiple times will itself take time, I set up the same loop three times with the the first loop not running either function so as to determine the time the loop code takes to run so that can then be subtracted from the run times of the other two loops so as to just leave us with the time the alternate code itself takes to run. Since this is a speed test that is not intended to be run on a live web page (only the faster version of the code to be tested will make it to the web) we have a legitimate use for using prompt() and alert() for this as we don't need a fancy interface where we will be the only user. As this code will never go on the web it doesn't contradict these dialogs having no purpose on the web any more.

var a, p, n, t1, t2, t3, t4, base, p1, p2;
p = prompt('entries');
t1 = new Date();
n = 10000;
while(n--) {
a = '';
}
t2 = new Date();
n = 10000;
while(n--) {
a = '';
a = [].populate1(p);
}
t3 = new Date();
n = 10000;
while(n--) {
a = '';
a = [].populate2(p);
}
t4 = new Date();
base = t2.valueOf() - t1.valueOf();
p1 = t3.valueOf() - t2.valueOf() - base;
p2 = t4.valueOf() - t3.valueOf() - base;
alert('p1 - '+p1+' : p2 - '+p2);

Here we are using 'n' to hold the number of times to run the loop for each test. The four variables t1, t2, t3 and t4 capture the time before the start of the first loop, between the loops and at the end of the last loop. So the time between t1 and t2 is the time to run the loop without either version of the code, the time between t2 and t3 is the time to run the loop with the first version of the code and the time between t3 and t4 is the time to run the loop with the second version of the code. By subtracting the loop time from these last two we get the time to run the two alternatives 'n' times without any of the surrounding loop code.

Using the prompt() makes it easy for us to repeat the test multiple times with different values for the size of the array to be populated. By running multiple times in different browsers we can determine the point at which populate1() becomes faster than populate2().

The results surprised me. While I expected populate1() to run faster than populate2() when a large array is to be populated, it turns out that a large array is much smaller than I thought. In fact in Opera 12 and Internet Explorer 11 the array [0,1,2,3,4,5,6,7,8,9] can be generated faster via populate1() than it is via populate2(). In Chrome 40 an array of 25 entries is created faster by populate 1() than by populate2(). Firefox Developer 35.0a2 required the largest array size before populate1() becomes the faster alternative but even that browser only needs there to be 40 entries in the array. So based on these results any array of 25 or more entries can be populated more quickly for most visitors using populate1(). Since both versions will populate an array of 100+ so quickly that the time the code takes is irrelevant, you may as well always use the populate1 version of this code as the only time the two versions have a noticeable difference in speed is for large arrays where that one is much faster - for example entering 10000 as the size of the array to create and the loop version takes about 750 times as long to run as the better alternative.

With the way this speed test code is written it will be really easy to reuse the same code for any other speed comparisons that I decide to run in future as it is just a matter of setting up the two alternatives and calling them from the second and third loops in place of the populate calls currently there.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate