• Choose a category
• All
• Classic-Fiction

By Root 231 0

This is where performance testing comes in. In this type of testing, you test two (or more) different ways of doing something and compare their speeds.

If you want to test something small, there's an informal way of doing this.

Store the current time

Run your test

Store the new current time

Subtract the two times to see how long it took

If your code will be running in different browsers, you'll want to run your tests in all those environments. Sometimes—often due to the way the JavaScript engine is implemented—what's fastest in one browser won't be what's fastest in another.

Let's see how to implement one of these tests. But what to test? We'll use an test I did a while ago. Here's the scenario I had: I had two arrays, and I wanted to add all the items from the second array to the first array. There are three ways to do this:

Loop over the second array and push each item into the first array one by one.

Use array's concat method; this returns a new array with the items in both arrays, but we can just reassign the variable that has the first array

Use the fact that array's push method can take as many parameters as we want to give it and use the function's apply method to turn that second array into a list of parameters.

So, let's see how we would test this; I'll go over this piece by piece:

Example 4.22 a

var d1, d2, d3, d4, d5, d6,

arr1 = [1,2], arr2 = [],

i = 0, len;

for ( ; i < 100000; i++) {

arr2[i] = i;

}

i = 0;

len = arr2.length;

This sets up our testing environment. We've got a bunch of variables to keep our times. We have the first array and the second array. We're putting 100,000 items in the second array because modern JavaScript engines are so fast that we need to make a big test, or else everything will happen in zero milliseconds. Now, let's run the first test:

Example 4.22 b

d1 = new Date().getTime();

for ( ; i < len; i++) {

arr1.push(arr2[i]);

}

d2 = new Date().getTime();

Here it is; we capture the current time, run the test, and capture the new current time. As you may recall, the getTime method of Date objects return the number of millisecond since January 1, 1970. If we subtract d1 from d2, we'll get the number of milliseconds it took to run the test (see a few paragraphs down).

Next test!

Example 4.22 c

arr1 = [1,2];

d3 = new Date().getTime();

arr1 = arr1.concat(arr2);

d4 = new Date().getTime();

We have to start by resetting arr1, because it was changed in the previous test. We've captured our times, so let's do the last test now:

Example 4.22 d

arr1 = [1,2];

d5 = new Date().getTime();

Array.prototype.push.apply(arr1, arr2);

d6 = new Date().getTime();

This might seem a bit cryptic. Basically, we're using the fact that the apply method of functions takes an array of arguments as it's second parameters. Since we can't just do arr1.push(arr2) (that would make arr2 an item in arr1, instead of each of arr2's items), we're doing it this way.

At the end, we can do this:

Example 4.22 e

console.log("looping and pushing: ", (d2 - d1) );

console.log("array's concat: ", (d4 - d3) );

console.log("push via apply: ", (d6 - d5) );

The test with the lowest score (the quickest running time) is the fastest. Remember that time might change between browsers, so be sure to check all the browsers your code might be running in. To make this easier, I like to use the web app JSBin; it's made to easily share quick snippets of code. Just paste your tests in the left panel (the JavaScript panel), and hit "Preview." You can also click "Save," and then copy the URL. This is a unique URL that you can use to test that snippet in any browsers. If you want to try this test in JSBin, you can get it at this URL: http://jsbin.com/ejogo5

A note here: When using JSBin, you'll probably want to change the console.log lines to something like this:

document.write("
looping and pushing: " + (d2 - d1) );

document.write("
array's concat: " + (d4 - d3) );

document.write("
push via apply: " + (d6 - d5) );

Fig. 4-1. JSBin

You'll want to run the test