85% Slower Code

Following on from our previous post about JavaScript code performance: 29% Slower Code we've looked at another performance vs "cleaner" or shorter code scenario.

The problem and solutions

The problem was:

Write a function to return the a simple integer representing progress based on a "name" or position within a given application.

One solution was:

function getProgress(name) {
 return {
    one: 20,
    two: 40,
    three: 60,
    four: 60,
    five: 60,
    six: 80,
    seven: 90,
    eight: 100
  }[name] || 0;
}

This is a very nice use of an Object to easily find the required progress value through evaluation based on the supplied name and it’s a simple, short and readable method.

Another solution was:

function getProgress(name) {
  var progress;
  switch (name) {
    case 'one': {
        progress = 20;
        break;
      }
    case 'two': {
        progress = 40;
    	break;
      }
    case 'three': {
        progress = 60;
    	break;
      }
    case 'four': {
        progress = 60;
    	break;
      }
    case 'five': {
        progress = 60;
        break;
      }
    case 'six': {
        progress = 80;
        break;
      }
    case 'seven': {
        progress = 90;
        break;
      }
    case 'eight': {
        progress = 100;
        break;
      }
    default: {
        progress = 0;
      }
  }
  return progress;
}

This is good old JavaScript using a simple switch statement to determine the progress value based on the supplied name but it’s a lot more code and it’s not quite as readable; even more so with the strict requirement for braces within the switch statement as seen here.

Both answers solve the problem but we then questioned the performance of each of the answers.

Which is faster?

I created a simple test based on these two solutions (here) to return a simple integer representing some progress and we found that one of the answers actually performs up to 85% slower than the other.

And again; it’s the shorter of the two code snippets.

What that tells us

It really does show that we all need to be mindful of the consequences of writing shortened or "cleaner" code and the potential performance issues of doing so compared to using the "classic" ways of doing things.

It’s great to reduce your source code line count; but if your application could and should perform better then it’s certainly worth writing the extra syntax.

This really is extreme but if you're targeting mobile devices or wearables then every operation per second counts, and if your code includes multiple "shortcuts" then your application is going to be noticeably slower than it could be.

Browser differences

We ran the tests through various browsers; in each case the longer of the two code snippets outperformed the smaller, showing up to 45% faster in Firefox and up to 85% faster within Google Chrome and Safari running on a MacBook Pro with OS X El Capitan.

Testing with on Windows 10 through VMWare Fusion showed similar results (Chrome 84% faster, Firefox 54% faster) but strangely; Microsoft Edge (identified as Chrome v42.0.2311 by jsperf) showed that the smaller, Object based code snippet actually outperformed the switch statement version by 23% which is rather odd.