Performance Optimizations for High Speed JavaScript / Page 2 | WebReference

Performance Optimizations for High Speed JavaScript / Page 2


[prev] [next]

Performance Optimizations for High Speed JavaScript [con't]

Technique 2: Avoid references to objects or object properties

To illustrate how this technique works, we use a real-life JavaScript function which creates strings of whatever length is needed. And as we'll see, more optimizations can be added!

A function like the one used here is to create padding to align columns of text, for formatting money, or for filling block data up to the boundary. A text generation function also allows variable length input for testing any other function that operates on text. This function is one of the important components of the JavaScript text processing module.

Original code for creating strings stringFill1()

Here, we cover two more of the most important optimization techniques while developing the original code into an optimized algorithm for creating strings. The result is an industrial-strength, high-performance function that I've used everywhere--aligning item prices and totals in JavaScript order forms, data formatting and email / text message formatting and many other uses.

The syntax is here is clear. As you can see, we've used local function variables already, before going on to more optimizations.

Be aware that there's one innocent reference to an object property s.length in the code that hurts its performance. Even worse, the use of this object property reduces the simplicity of the program by making the assumption that the reader knows about the properties of JavaScript string objects.

The use of this object property destroys the generality of the computer program. The program assumes that x must be a string of length one. This limits the application of the stringFill1() function to anything except repetition of single characters. Even single characters cannot be used if they contain multiple bytes like the HTML entity  .

The worst problem caused by this unnecessary use of an object property is that the function creates an infinite loop if tested on an empty input string x. To check generality, apply a program to the smallest possible amount of input. A program which crashes when asked to exceed the amount of available memory has an excuse. A program like this one which crashes when asked to produce nothing is unacceptable. Sometimes pretty code is poisonous code.

Simplicity may be an ambiguous goal of computer programming, but generally it's not. When a program lacks any reasonable level of generality, it's not valid to say, "The program is good enough as far as it goes." As you can see, using the string.length property prevents this program from working in a general setting, and in fact, the incorrect program is ready to cause a browser or system crash.

Is there a way to improve the performance of this JavaScript as well as take care of these two serious problems?

Of course. Just use integers.

Optimized code for creating strings stringFill2()

Timing code to compare stringFill1() and stringFill2()

The success so far of stringFill2()

(See Figure 2)

stringFill1() takes 47.297 microseconds (millionths of a second) to fill a 100-byte string, and stringFill2() takes 27.68 microseconds to do the same thing. That's almost a doubling in performance by avoiding a reference to an object property.


[prev] [next]