In Website Performance: JavaScript, I provided a couple of comments about the effectiveness of some of the tips. I obtained this information by conducting my own tests on the three browsers that are installed on my little netbook computer (just about the slowest computer you could ever hope to own).Here is the harness I used for my tests. It’s simple and it doesn’t require an Internet connection.
<html><head></head><body><script type="text/JavaScript">
//Test Harness for JavaScript performance. It handles up to three alternatives.
//Just copy/paste your code to the lines that say "INSERT CODE TO BE TESTED
//HERE," then double-click on the file to run it in your default web browser.
//Written by Warren Gaebel, B.A., B.C.S. Released into public domain 2012.03.31.
var numReps = 1000; //adjust this value; 1,000,000 may work well
var numberOfTests = 5; //adjust this value; 100 may work well
var o1timeSum = 0;
var o2timeSum = 0;
var o3timeSum = 0;
var timeDiff12Sum = 0;
var timeDiff13Sum = 0;
var timeDiff23Sum = 0;
var timeDiff12;
var timeDiff13;
var timeDiff23;
for (var j = numberOfTests; j--;) {
document.write ("<br />Test # " + (numberOfTests-j) + ":");
// OPTION #1
var o1start = new Date();
for (var i = numReps; i--;) {
//INSERT CODE TO BE TESTED HERE - OPTION #1
}
var o1stop = new Date();
var o1time = o1stop - o1start;
o1timeSum += o1time;
document.write (" Option #1: " + o1time);
// OPTION #2
var o2start = new Date();
for (var i = numReps; i--;) {
//INSERT CODE TO BE TESTED HERE - OPTION #2
}
var o2stop = new Date();
var o2time = o2stop - o2start;
o2timeSum += o2time;
document.write (" Option #2: " + o2time);
// OPTION #3
var o3start = new Date();
for (var i = numReps; i--;) {
//INSERT CODE TO BE TESTED HERE - OPTION #3
}
var o3stop = new Date();
var o3time = o3stop - o3start;
o3timeSum += o3time;
document.write (" Option #3: " + o3time);
timeDiff12Sum += (timeDiff12 = o1time - o2time);
timeDiff13Sum += (timeDiff13 = o1time - o3time);
timeDiff23Sum += (timeDiff23 = o2time - o3time);
}
document.write ("<br />");
document.write ("<br />Average Time for Option 1: " + (o1timeSum/numberOfTests));
document.write ("<br />Average Time for Option 2: " + (o2timeSum/numberOfTests));
document.write ("<br />Average Time for Option 3: " + (o3timeSum/numberOfTests));
document.write ("<br />");
document.write ("<br />Time Difference (1-2): " + (timeDiff12Sum/numberOfTests));
document.write ("<br />Time Difference (1-3): " + (timeDiff13Sum/numberOfTests));
document.write ("<br />Time Difference (2-3): " + (timeDiff23Sum/numberOfTests));
</script></body></html>
In the final three lines of output, the three options are compared to each other. A positive number in the first line indicates that option 1 is slower than option 2. A positive number in the second line indicates that option 1 is slower than option 3. A positive number in the third line indicates that option 2 is slower than option 3. Negative number mean the opposite.
You may notice that you get different results every time you run this program. That’s normal. It underscores the dilemma we face when measuring client-side performance: The combination of browser, operating system, network, configuration, and background processing is usually different from one user to the next (and even from one invocation to the next on the same machine). Testing every possible environment is not possible.
Use this tool to compare two options, but don’t draw any conclusions if the difference is small or if one option is better on browser A, but worse on browser B. Always, always, always test every browser version being used by your end-users.
I hope you find this test harness useful. Watch for my next article, which will have a similar test harness for PHP.
