How DRY Affects JavaScript Performance — Faster JavaScript Execution For The Lazy Developer

Let’s unravel the grey area of improving actual JavaScript code itself and discover the truth and science of JavaScript performance patterns.

While improving network performance of your scripts through file size and the script loading is critical, the run-time performance of your JavaScript code has the most direct effect of the visceral feel that your users experience.

I created jsPerf.com, the JavaScript performance testing playground, to settle the scores of JavaScript performance recommendations. I’ve come up with a simple theorem — easily summarized. Basically, the biggest enemies of performance when it comes to JavaScript (in descending order) are:

1. Reading/writing to the DOM
2. Function calls
3. Lookups (scope lookups, property lookups, array item lookups)

Of course, there’s not much you can do in JavaScript without using any of these things. The idea is that if you can get rid of a DOM read by using a function call or a property lookup instead, you should do it. Similarly, if you can replace a function call with a scope lookup, go for it! It will result in DRY code with much better performance.

I spend a lot of time reviewing other people’s JavaScript code for performance issues, and I think it’s safe to say this presentation covers about 70% to 80% of the improvements that I usually end up recommending. It’s a simple principle, and it’s easy to apply it once you understand it fully —there just needs to be someone to explain it all to you. I’m that guy!

The basic gist of this idea fits in one slide, but I’d like to take the time to A) explain what exactly these slow things are (so even JavaScript beginners that don’t know what a scope lookup is can follow along); and B) show lots of practical, real-world examples of how applying this technique can result in better performance, regardless of whether you’re using JavaScript libraries or plain vanilla JavaScript. A is especially useful for people who are new to high-performance JavaScript, but B will be useful for more advanced JavaScript coders as well.

I believe this technique is useful because it can be applied to all the JavaScript code you’ll ever write, and it’s guaranteed to have a positive impact on performance (among other advantages). It will be useful for both JavaScript beginners (because everything will be explained properly) and advanced scripters that want to focus on performance while coding JavaScript.