Performance Testing in JavaScript

Fast pages and quick load times are key factors to keeping visitors on your site.
If you make them wait, they will leave.

So the speed of your JavaScript applications is crucial.

Fortunately, it turns out that JavaScript applications are ripe for performance optimization.

This requires a strong testing framework... enter JSTR.

String Concatenation Performance

A simple example of the type of benefit available from performance testing can come from testing String concatenation.

Javascript allows the use of "+" to concatenate Strings, but it turns out to be rather inefficient if you are building a very big string, eg: dynamically building HTML from AJAX.

Instead, the use of a Array (wrapped to provide a StringBuffer object) provides a huge boost in performance.

[cc lang="javascript" tab_size="2" lines="40"]
function StringBuffer() {
this.buffer = [];
}

StringBuffer.prototype.append = function append(string) {
this.buffer.push(string);
return this;
};

StringBuffer.prototype.toString = function toString() {
return this.buffer.join("");
};

var buf = new StringBuffer();
buf.append("this is being added");
alert(buf.toString());
[/cc]

To test this against a normal concatenation:
Copy the String below, and then paste it into the IMPORT function in JSTR.

[cc lang="javascript" tab_size="2" lines="40"] jstr_StringBuffer=KHtuYW1lOiJTdHJpbmdCdWZmZXIiLCBkZXNjOiJUaGlzIHRlc3QgY29tcGFyZXMgdGhlIHNwZWVkIG9mIGJ1aWxkaW5nIGEgbGFyZ2Ugc3RyaW5nIGJ5IGNvbmNhdGVuYXRpbmcgc3RyaW5ncyBvciB1c2luZyBhIFN0cmluZ0J1ZmZlcihhIHdyYXBwZWQgYXJyYXkpLlxuQ29tcGFyZXMgYm90aCBsb25nIGFuZCBzaG9ydCBzdHJpbmcgYnVpbGRpbmcuXG4iLCBsb29wczoiMjAwMCIsIGl0ZXJhdGU6IjUiLCB0ZXN0czpbe25hbWU6InNob3J0U1RSIGNvbmNhdCIsIHNldHVwOiJhU3RyaW5nID0gXCJhZGRpbmcgXCI7XG5iU3RyaW5nID0gXCJTdGFydCBcIjsiLCBjb2RlOiJiU3RyaW5nICs9IGFTdHJpbmc7IiwgaW5jOnRydWV9LCB7bmFtZToibG9uZ1N0ciBjb25jYXQiLCBzZXR1cDoiY1N0cmluZyA9IFwiIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkIGFkZGVkICBMT05HXCI7XG5kU3RyaW5nID0gXCJTdGFydCBcIjsiLCBjb2RlOiJkU3RyaW5nICs9IGNTdHJpbmc7IiwgaW5jOnRydWV9LCB7bmFtZToic2hvcnRTdHIgU3RyaW5nQnVmZmVyIiwgc2V0dXA6ImVTdHJpbmcgPSBcIiBNb3JlXCI7XG5mU3RyaW5nID0gXCJTdGFydCBcIjtcblxuU3RyaW5nQnVmZmVyID0gZnVuY3Rpb24gKCkgeyBcbiAgIHRoaXMuYnVmZmVyID0gW107IFxuIH0gXG5cbiBTdHJpbmdCdWZmZXIucHJvdG90eXBlLmFwcGVuZCA9IGZ1bmN0aW9uIGFwcGVuZChzdHJpbmcpIHsgXG4gICB0aGlzLmJ1ZmZlci5wdXNoKHN0cmluZyk7IFxuICAgcmV0dXJuIHRoaXM7IFxuIH07IFxuXG4gU3RyaW5nQnVmZmVyLnByb3RvdHlwZS50b1N0cmluZyA9IGZ1bmN0aW9uIHRvU3RyaW5nKCkgeyBcbiAgIHJldHVybiB0aGlzLmJ1ZmZlci5qb2luKFwiXCIpOyBcbiB9OyBcblxuYnVmID0gbmV3IFN0cmluZ0J1ZmZlcigpO1xuYnVmLmFwcGVuZChmU3RyaW5nKTsiLCBjb2RlOiIgYnVmLmFwcGVuZChlU3RyaW5nKTtcblxuIiwgaW5jOnRydWV9LCB7bmFtZToibG9uZ1N0ciBTdHJpbmdCdWZmZXIiLCBzZXR1cDoiXG5oU3RyaW5nID0gXCJTdGFydCBcIjtcblxuYnVmMiA9IG5ldyBTdHJpbmdCdWZmZXIoKTtcbmJ1ZjIuYXBwZW5kKGhTdHJpbmcpOyIsIGNvZGU6ImJ1Zi5hcHBlbmQoY1N0cmluZyk7XG5cbiIsIGluYzp0cnVlfV0sIHZlcnNpb246MX0p [/cc]

Just to give you an idea...
StringBuffer is just faster for short strings
and about 50 times faster for long strings...!

My thanks to Pavel Simakov for this.

Timing is everything

Here for your delight.

A simple way to track timing in Javascript.

[cc lang="php" tab_size="2" lines="40"]
// TIMESTAMP Function
function timestamp(){return (new Date()).valueOf();}

// TIMER Function, wraps timing arround function call
function timer(f){
var t1 = timestamp();
for(var i = 0; i < 1000; i++){
f();
}
var t2 = timestamp();
return t2-t1;
}

// The function to test
var testFunc = function(){
var v = (window["DoYouBelieveInSpeedReading"])?true,false;
}
// Now call the timer
alert("time taken="+(timer(testFunc)/1000) + " seconds" );
[/cc]

The core is converting a date object into milliseconds: date.getValueOf(). This will give you a Long of the number of millseconds since 1970.

so var t1 = timestamp(); will store the start time.

Then do the thing you want to test... I would suggest a very large number of times... I needed to make it 100,000 for the Regex below.

and var t2 = timestamp(); becomes the end time.

Now totalTimeTaken = t2 -t1; in millseconds.

Finally time = totalTimeTaken/1000; to get the number of seconds that the function took.

I wrapped it all up in a function timer...

which can be called by
alert("time taken="+timer(myFunc)/1000);

I recently used this to test String matching functions, to find that indexOf is blisteringly fast, followed closely by pattern.test, and then way behind that String.match .

For 100,000 repetitions:
String.match: 1300ms
pattern.test: 360ms
String.indexOf: 180ms

So the moral of todays story is...

• 
  
  use indexOf if you can


• 
  
  pattern.test if you must have REGEX or more than one match


• 
  
  and AVOID String.match if you can

Just remember that premature optimization is a bad thing...

Happy Testing...!