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.