JavaScript:
Speed Tips

Introduction

This page is to show some some ways to speed up the execution of common JavaScript functions. I am not an expert on JavaScript and I se very little of it on the site. The uncompressed JavaScript file for the entire site is only 2.14Kb, once minified it is 1.55Kb and it's even smaller after the server has compressed it with gzip.

A search for something like Improving JavaScript Performance will give a lot of vry good sites talking about memory optimization, leaks, worker threads and other techniques. That is far beyond the scope of this page, which is to show common problms and what I do to try and get the JavaScript I do use to run as efficiently as I can.

JSPerf

JSPerf was a site that allowed developers to test how fast various methods of doing something in JavaScript would run. 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 had thousands of such tets. Unfortunately the site closed down several years ago.

There are other benchmarking services by JSPerf was best because it had a searchable index of the tests run and their results so you didn't have to keep writing and running your own. I miss it. The closest alternative I have found is MeasureThat.net

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 Stack Overflow.

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.

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.

There are several other minifiers around, JSLint is also good at tidying up JavaScript and looking for mistakes. It can be a little too strict at times and sometimes trying to make optimize the code to their rules breaks it when it is minimized. I minimize it using Minify which can also handle CSS files.

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.

JavaScript: Speed Tips