Optimizing JavaScript for Download Speed--Selections from Chapter 9 of Speed Up Your Site (2/3) WebReference.com

Speed Up Your Site, Chapter 9: Optimizing JavaScript for Download Speed

What About Legibility?

The knock against optimized scripts is that they are hard to read. This can be a good thing, because some authors want to obfuscate their code to make it difficult to copy and reverse engineer. However, optimized code is difficult to maintain and update. I recommend adopting a parallel strategy like the one you used for optimized HTML files. After you debug your code (which is fully commented and self-describing, right?), optimize it by hand or automatically optimize it to another file, like this:

script.js
script_c.js

Link to script_c.js for the added speed, and perform any edits on the original script.js, which you can then reoptimize.

Remove Whitespace

Well-written JavaScripts tend to have a lot of whitespace for better legibility. Indents, spaces, and returns make your code easier for you and others to read and modify; however, your browser doesn't care how pretty your code is. With a couple of exceptions, the JavaScript parser scans your script looking for tokens and ignores excess whitespace. So instead of this:

function printArray(a) {
  if (a.length == 0)
    document.write(" Array is empty");
  else {
    for (var i = 0; i < a.length; i++) {
      document.write(a[i] + " <br>");
    }
  }
}

Do this:

function printArray(a){
if(a.length==0)
document.write("Array is empty");
else{
for(var i=0;i<a.length;i++){
document.write(a[i]+"<br>");
}
}
}

Automatic Semicolon Insertion

The ECMAScript specification requires browsers to automatically insert semicolons where they are needed.^[2] Although they are optional, ending your lines with semicolons is good defensive programming practice. Semicolons are also required by most optimization strategies that remove excess whitespace. Without semicolons, removing whitespace can cause unintended consequences, such as running lines together. They also help programmers avoid errors. (Let's save programmers some time, too.)

Cut the Comments

Commenting your code is good programming practice, but comments take up valuable space. What's a programmer to do? There are two approaches to cutting comments: abbreviate your comments or remove them entirely. So instead of this (from PopularMechanics.com):

function gotoFinList() {
// "SAVE & FINISH" 
// this changes the bottom frameset to include a button to return to the homepage 
// it also submits the form in the main frame that will then generate a list of pages
// added during content editing.

Do this:

function gotoFinList() {
// chgs bottom frameset 2 incl button 2 ret 2 home 
// also submits form in main form and gen list of pgs
// added during content editg

Or even better:

function gotoFinList() {

You can use the parallel approach mentioned previously to keep a fully commented version for future updates.

2. ECMA, "ECMAScript Language Specification, Standard ECMA-262," 3d ed. [online], (Geneva, SZ: ECMA, 1999), available from the Internet at https://www.ecma.ch/publications/standards/ECMA-262.htm. Defines the ECMAScript language (otherwise known as JavaScript). Back

[previous] [next]

Created: February 10, 2003
Revised: February 10, 2003

URL: https://webreference.com/programming/optimize/speedup/chap9/2.html