JavaScript:
Speed Tips



Introduction

This page is to show some some ways to speed up the execution of common JavaScript functions.

JSPerf

As with any programming language JavaScript several ways of achieving the same effect. For example when dynamically writing to a page is it better to use innerHTML, innerText, textContent or document.write()? When extracting substrings from a string should you use substring, substr or slice? What type of loop is the fastest?

JSPerf has thousands of such tests. You can even write your own if you want.

Remember though that JSPerf runs thousands of iterations and the effect of a single instance on your page may not noticeably affect the speed at which it runs. However, the effect of several inefficiencies is cumulative and your code might be running slower than it otherwise could.

You may not always be able to choose the fastest method, there are differences between innerHTML, innerText, textContent and document.write(). InnerHTML supports HTML tags but both textContent and innerText use plain text, but neither of those are fully cross-browser compatible. For more information see the discussion on stackoverflow.

Default 0 or (0)

Some JavaScript functions such as charCodeAt() default to an argument of 0 if left empty. charCodeAt() is the same as charCodeAt(0), or is it? It actually is not. Functions such as this will run a lot faster if the argument is supplied.

Loops

When looping though an array or a string it is common see something similar to:

for (var count=0; count<str.length; count++)

It is actually marginally faster in some browsers and a lot faster in others to test for the end point in the initial declaration by using:

for (var count=0, end=str.length; count<end; count++).

The reason for this is in the first example str.length is evaluated on every iteration of the loop. In the second, it is evaluated just once. See JSPerf for performance test.

Minifiers, Compressors and Compilers

There are tools around that can seriously decrease the size of your JavaScript. Tools such as the Google Closure Compiler "analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls." Unlike a normal compiler it does not compile to machine code but to "better JavaScript." The documentation for it is here.

Take this simple function. All it does is produce a series of links to HTML anchors:

Create a row of A - Z links going to anchors
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var outtxt = "";
for(var count=0, end=str.length; count<end; count++){
	var nextChar = str.charAt(count);
	outtxt += "<a href='#" + nextChar + "'>" + nextChar + "</a> ";
}
document.getElementById("azlinks1").innerHTML = outtxt;

This is what it looks like after being put through the Google Closure Compiler:

for(var a="",b=0;26>b;b++)var c="ABCDEFGHIJKLMNOPQRSTUVWXYZ".charAt(b),a=a+("<a href='#"+c+"'>"+c+"</a> ");document.getElementById("azlinks1").innerHTML=a;

There are several other minifiers around, JavaScript-Minifier, JSCompress, Microsoft Ajax Minifier, MinifyJavaScript, Packer, UglifyJS, Pretty Diff, and YUI Compressor to name a few.

There are even pages that compare the performance of at least some of them: Blogging Developer, Compressor Rater, Mohsin Naeem, Nick Berardi, and Wrox.

When using thee tools it should be remembered that the code produced by these minifiers can be difficult to debug and edit. Sometimes difficult to read. For these reasons the code should be written as normal and a copy kept. The minified code can be used on a production web server but the original code kept - just in case.

Other Tools

All major browsers now contain developer and debug tools. Chrome, Firefox, Internet Explorer, Opera and Safari. Also useful for testing JavaScript, CSS and HTML is the JSFiddle site. Another useful is the Can I Use site, but that's mostly for CSS and HTML 5.

This page created 18th October 2014, last modified 20th October 2014


GoStats stats counter