Online education portals like Udacity and Coursera are really changing the world of remote learning in significant ways. By making free and high quality education accessible to a global audience, these platforms are opening up undreamt of possibilities for communities around the world to improve, grow, and prosper in the digital economy of the 21st century. Education at top tier colleges and universities has traditionally been a social and economic privilege, but now anyone can join in the learning revolution by sitting in virtual classrooms with the world’s best and brightest educators. Whether this involves learning how to code and build smart phone apps, or starting up a new business, or learning about public health literacy, the sky is the limit of what’s now possible.

Everything about Web and Network Monitoring

Test Harness for JavaScript Performance

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--;) {
    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--;) {
    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--;) {
    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));


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.

Post Tagged with

About Warren Gaebel

Warren wrote his first computer program in 1970 (yes, it was Fortran).  He earned his Bachelor of Arts degree from the University of Waterloo and his Bachelor of Computer Science degree at the University of Windsor.  After a few years at IBM, he worked on a Master of Mathematics (Computer Science) degree at the University of Waterloo.  He decided to stay home to take care of his newborn son rather than complete that degree.  That decision cost him his career, but he would gladly make the same decision again. Warren is now retired, but he finds it hard to do nothing, so he writes web performance articles for the Monitor.Us blog.  Life is good!