Performance Optimizations for High Speed JavaScript
By
|
Description
In this article, we look at how important JavaScript optimizations are analyzed. These will be explained, including using local function variables, avoiding references to objects or object properties, avoiding adding short strings to long strings, and finally, using buffering to process data in optimal sizes. These general-purpose JavaScript optimization techniques are designed for JavaScript on all browsers. Detailed graphs of all the performance results are given after each optimization. You will be amazed at the incredible speed improvements in JavaScript!
Introduction
Optimization of JavaScript computer code deserves attention, since JavaScript has a large impact on Web page performance. In this article we develop two high performance JavaScript algorithms using several performance optimization techniques.
You can easily use the same optimization methods in your code. Every optimization will shorten the execution speed of your program by 10 - 95% or more. Used in combination, these optimizations can mean the difference between programs that run as slow as molasses, or problem-crunching software that runs at a high rate of speed.
Important JavaScript optimizations
Optimizations in a broad sense will involve simplifying code, precomputing results which are repeatedly reused, and organizing code so more results can be reused. From the standpoint of computer programming purity, optimizations should increase the simplicity, clarity and generality of a computer program. (See The Practice of Programming by Brian Kernighan and Rob Pike.)
Adding simplicity, clarity and generality is what these
optimizations will do. In fact, one of the optimizations adds support
for Unicode and multibyte characters such as and —,
and still improves performance drastically
compared to the slower unoptimized version!
We analyze four optimizations in this article. More complicated optimizations or ones with bigger payoffs are listed after easy-to-use optimizations.
- Use local function variables
(82% improvement, 63 microseconds versus 359). - Avoid references to objects or object properties
(41% improvement, 27.68 microseconds versus 47.297). - Avoid adding short strings to long strings
(93% improvement, 4.608 microseconds versus 62.54). - Use buffering to process data in optimal sizes
(96% improvement, 2.0 seconds versus 50.0).
Technique 1: Use local function variables
When I wrote code to implement the MD5 message digest algorithm, my code was first written in C, then transferred to JavaScript. In order to make my JavaScript MD5 code faster than everyone else's, I had to take advantage of local function variables. What makes my MD5 code faster are local function variables and optimized buffer sizes, techniques that we address in this article.
Using local function variables is simple. If you have code which uses variables repetitively, it's worthwhile to make the code into a function to take advantage of the higher performance of local function variables.
Global variables have slow performance because they live in a highly-populated
namespace.
Not only are they stored along with many other
user-defined quantities and JavaScript variables, the browser must
also distinguish between global variables and properties of objects that are in the current context.
Many objects in the current context can be referred to
by a variable name rather than as an object property,
such as alert() being synonymous with window.alert(). The down side is this convenience slows
down code that uses global variables.
Sometimes global variables also have higher performance, like local function variables,
if you declare them
explicitly with the var keyword. An example is var d = document, instead of d = document, but
it's not reliable. Mysterious behavior that works sometimes but not always is
a danger sign, and I feel more comfortable using local function variables.
On the other hand, it makes sense that local function variables should have better performance. There are few local function variables in most functions, and references to local function variables can be converted to efficient executable instructions by the JavaScript compiler.
It's amazing how few people are aware of simple JavaScript
optimizations like this, or who simply don't care. For example,
no one else has taken the time to re-optimize their MD5 JavaScript code. When I
wrote my md5.js script, I had no intention of competing for the top position,
and yet the code has been unbeaten since 2003.
Let's figure out why local function variables make a difference by counting to a million, first without local function variables, and then with local function variables.
Counting to one million without local function variables
Tip: the new Date() object returns the time difference in milliseconds
when it's subtracted from another new Date() object, thus providing a
great way to time your scripts.
Counting to one million with local function variables
Code that gives us the results of the timing
The result is 359 milliseconds (thousandths of a second) when not using local function variables compared to 63 milliseconds when local function variables are used. This improvement is worth taking the extra time to convert code into a function.
